Click menu does not work on mobile

0

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

    
asked by anonymous 18.02.2016 / 17:52

0 answers