html - 带有下拉选项的水平菜单不起作用

Question

我制作了一个带有下拉选项的水平菜单，但在移动设备上，此下拉菜单没有响应，所有字母都变得一团糟。友情链接 http://bemestarservice.com.br/index

我的菜单

    <nav class="top-nav"><ul class="top-nav">
<li class="active"><a href="index">Início <span> </span></a></li>
                <li class=""><a href="quemsomos">Sobre nós<span> </span></a></li>
                <li class=""><a href="servicos">Serviços<span> </span></a>
                    <ul class="" >
                        <li class=""><a href="experience">Experience</a></li>
                        <li class=""><a href="massagem">Massagem</a></li>
                        <li class=""><a href="social">Social</a></li>
                        <li class=""><a href="tecno">tecno</a></li>
                    </ul>
                </li>
                <li class=""><a href="clientes">Clientes<span> </span></a></li>
                <li class=""><a href="contato">Contato <span> </span></a></li>

CSS

    nav {
    position: relative;
    float: right;
}
nav ul {
    padding: 0;
    float: right;
    margin: 0.75em 0;
}
nav li {
    display: inline;
    float: left;
    position:relative;
}
nav a {
    color: #fff;
    display: inline-block;
    text-align: center;
    text-decoration: none;
    line-height: 40px;
}
nav a:hover{
    text-decoration:none;
    color:#00A2C1;
}
nav a#pull {
    display: none;
}
/*Styles for screen 600px and lower*/
@media screen and (max-width: 768px) {
    nav { 
        height: auto;
        float:none;
    }
    nav ul {
        width: 100%;
        display: block;
        height: auto;
    }
    nav li {
        width: 100%;
        position: relative;
    }
    nav li a {
        border-bottom: 1px solid #eee;
    }
    nav a {
        text-align: left;
        width: 100%;
        text-indent: 25px;
    }
}
/*Styles for screen 515px and lower*/
@media only screen and (max-width : 768px) {
    nav {
        border-bottom: 0;
        float:none;
    }
    nav ul {
        display: none;
        height: auto;
        margin:0;
        background: #fff;
    }
    nav a#pull {
        display: block;
        position: relative;
        color: #F26D7D;
        text-align: right;
        position: absolute;
        top:9px;
    }
    nav a#pull:after {
        content:"";
        background: url('nav-icon.png') no-repeat;
        width: 30px;
        height: 30px;
        display: inline-block;
        position: absolute;
        right: 15px;
        top: 10px;
    }
    nav a#pull img{
        margin-right:2%;
    }
    .top-nav ul li a {
        color: #2C3E50;
        padding: 0em 0;
    }
}
/*Smartphone*/
@media only screen and (max-width : 320px) {
    nav {
        float:none;
    }
    nav li {
        display: block;
        float: none;
        width: 100%;
    }
    nav li a {
        border-bottom: 1px solid #576979;
    }
}

我不知道我还能做些什么来解决这个问题。这是给客户的，请帮忙

Answer 1

查看您的网站后，我可以在 960px 宽度 处看到一个断点。那是在 @media only screen and (max-width : 960px) 你必须改变/添加 CSS 如下:

CSS

@media only screen and (max-width : 960px)
{
    .top-nav li ul 
    {
        position: relative; /* CHANGED FROM ABSOLUTE */
        top: 100%;
        left: 0;
        background: #F7F7F7; /* JUST TO MAKE SUBMENU LOOK DIFFERENT. */
        display: none;
    }

    /* ADD FOLLOWING CODE */  
    .top-nav ul li > ul
    {
        overflow:hidden;
        max-height:0px;
        -webkit-transition:all 1s ease-in-out;
        -moz-transition: all 1s ease-in-out;
        transition: all 1s ease-out;    
        -webkit-transition-delay: 0.01s; /* Safari */
        transition-delay: 0.01s;
    }

    .top-nav ul li:hover > ul
    {
        max-height:700px;
    }


}

HTML

Changed to display:none; I guess this is being updated by JavaScript/JQuery. So remove it for screens less than 960px width

<li class=""><a href="servicos">Serviços<span> </span></a>

<ul style="display: none;"> <!-- CHANGED FROM DISPLAY:BLOCK; -->
    <li><a href="experience">Experience</a>
    </li>
    <li><a href="massagem">Massagem</a>
    </li>
    <li><a href="social">Social</a>
    </li>
    <li><a href="tecno">tecno</a>
    </li>
</ul>
</li>