I made a responsive menu that works in the browser, but on smartphone I can not click the child link. Example user menu - > create. When I click on user it opens the options (list, create and change password), however, when I click on any of the links the menu closes.
<style>
#nav > a {
display: none;
}
#nav li a {
display: block;
}
#nav li a:active {
background-color: !important;
}
/* first level */
#nav > ul {
background-color: #2d2d2d;
}
#nav > ul > li > a {
line-height: 2.5em; /* 60 (24) */
text-align: center;
}
#nav > ul > li:hover > a,
#nav > ul:not( :hover ) > li.active > a {
background-color: #2d2d2d;
}
/* second level */
#nav li ul {
background-color: #2d2d2d;
display: none;
position: absolute;
top: 100%;
}
#nav li:hover ul {
display: block;
left: 0;
right: 0;
}
#nav li:not( :first-child ):hover ul {
left: -1px;
}
#nav li ul a {
border-top: 1px solid white;
padding: 0.75em; /* 15 (20) */
color: white;
}
#nav li ul li a:hover,
#nav li ul:not( :hover ) li.active a {
background-color: #e15a1f;
color: #335a9e;
}
@@media only screen and ( max-width: 62.5em ) /* 1000 */ {
#nav; {
width: 100%;
position: static;
margin: 0;
}
}
@@media only screen and ( max-width: 40em ) /* 640 */ {
#nav; {
position: relative;
top: auto;
left: auto;
}
#nav > a {
width: 3.125em; /* 50 */
height: 3.125em; /* 50 */
text-align: left;
text-indent: -9999px;
/*background-color: #e15a1f;*/ /* Simbolo do menu */
position: relative;
}
#nav > a:before,
#nav > a:after {
position: absolute;
border: 2px solid #fff;
top: 35%;
left: 25%;
right: 25%;
content: '';
}
#nav > a:after {
top: 60%;
}
#nav:not( :target ) > a:first-of-type,
#nav:target > a:last-of-type {
display: block;
}
/* first level */
#nav > ul {
height: auto;
display: none;
position: absolute;
left: 0;
right: 0;
}
#nav:target > ul {
display: block;
}
#nav > ul > li {
width: 100%;
float: none;
}
#nav > ul > li > a {
height: auto;
text-align: left;
padding: 0 0.833em; /* 20 (24) */
}
#nav > ul > li:not( :last-child ) > a {
border-right: none;
border-bottom: 1px solid /*#cc470d*/; /*Linha que separa os menus*/
}
/* second level */
#nav li ul {
position: static;
padding: 1.25em; /* 20 */
padding-top: 0;
}
}
</style>
HTML:
<header>
<div class="container">
<nav id="nav" role="navigation" class="navbar navbar-inverse navbar-fixed-top">
<a href="#nav" title="Show navigation">Show navigation</a>
<a href="#" title="Hide navigation">Hide navigation</a>
<ul class="nav pull-left">
<li class="navbar-text pull-left">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Usuário<b class="caret"></b></a>
<ul class="dropdown-menu">
@if (Administrador)
{
<li>@Html.ActionLink("Listar", "Index", "Usuario")</li>
<li>@Html.ActionLink("Criar", "Criar", "Usuario")</li>
}
<li>@Html.ActionLink("Alterar Senha", "AlterarSenha", "Usuario")</li>
</ul>
</li>
</nav>
</div>
</header>
How can I change this code so that the menu item click will work on my smartphone?
Thank you