Css nav submenu mobile don't work - html

Question

I'm building a nav menu with sub-menus with just CSS (media queries too) and html.
It works fine visualy, but the problem is:
On the mobile browser, When I click in any sub-menu, it won't work, sometimes it just redirect to the first menu address and sometimes it don't even redirect. On the computer browser it works fine too.
Here is my code:
#nav{
position: relative;
height: 100%;
}
#nav ul{
margin: 0px;
padding: 0px;
height: 100%;
}
#nav ul li{
list-style: none;
float: left;
height: 100%;
border-right: black solid 2px;
text-align: center;
padding: 0px 15px 0px 15px;
}
#nav ul li:hover{
background: #47350e;
}
#nav ul li a{
position: relative;
font-family: 'Oswald';
font-size: 18px;
color: white;
text-transform: uppercase;
text-decoration: none;
top: 15px;
}
#nav ul li a:hover{
}
#nav ul li .children li{
border: 0px;
}
#nav ul li .children li a{
font-size: 13px;
top: 5px;
font-weight: normal;
}
#nav ul li .children li a:hover{
text-decoration: underline;
}
#nav ul li .children{
display: none;
position: absolute;
left: 0px;
top: 46px;
height: 30px;
width: 100%;
background: #47350e;
padding-left: 120px;
z-index: 5;
}
#nav ul li:hover .children{
display: block;
}
and HTML
<div id="nav">
<ul id="nav-items">
<li>
<a href=#>option 1</a>
</li>
<li>
<a href=#>option 2</a>
<ul class="children">
<li>
<a href=#>option 3</a>
</li>
<li>
<a href=#>option 4</a>
</li>
</ul>
</li>
</ul>
</div>

Answer 1

For mobile Version u can use Select menu.
<div id="mobile_menu">
<select>
<option>option1</option>
<option>option2</option>
<option>option3</option>
</select>
</div>
CSS is
In normal css
#mobile_menu{display:none;}
For mobile
#media only screen and (min-width: 320px) and (max-width: 479px) {
#mobile_menu{display:block;}
#nav{display:none;}
}

Answer 2

Possibly your #nav ul li a { rule is creating the mess.
position: relative;
top: 15px;
is working for both the levels, i.e. option 1 and option 3
Check if this is the issue. If do not resolve please share the link to your code.