Question

您好我正在尝试弄清楚如何让滚动条在移动视图中显示在this page上的下拉菜单中不显示。

[在发布之前我要求我提供更多详细信息，除了说我在这个页面添加了一些javascript而jQuery但删除了它并且遇到了同样的问题，所以我不认为就是这样]

Mobile Nav CASS

#nav_desktop{
    display: none;
}

#nav_mobile{
    display: block;

}

#nav_mobile ul
{
    list-style:none;
    position:relative;
    float:left;
    margin:0;
    padding:0;
}

#nav_mobile ul a
{
    display:block;
    background-color: #4A4949; 
    color:#ffffff;
    text-decoration:none;
    font-size: 18px;
    padding:0 15px;
    font-family: 'Handlee', cursive;

}

    #nav_mobile ul a:hover{
        color:#f09000;
    }

#nav_mobile ul li
{
    position:relative;
    float:left;
    margin:0;
    padding:0;
}

#nav_mobile ul li.current-menu-item
{
    background:#ddd;
}

#nav_mobile ul ul
{
    display:none;
    position:absolute;
    top:100%;
    left:0;
    background:#fff;
    padding:0;
}

#nav_mobile ul ul li
{
    float:none;
    width:200px;
}

#nav_mobile ul ul a
{
    line-height:75%;
    padding:10px 15px;
}

#nav_mobile ul li:hover > ul
{
    display:block;
}

导航HTML

 <nav id="nav_desktop"> 

    <ul>
        <li><a href="template_test.html">Home</a></li>
        <li><a href="#dt">Downtown Tour</a></li>
        <li><a href="#gt">Growth Tour</a></li>
        <li><a href="#lt">Landmarks Tour</a></li>
        <li><a href="#ct">Contact</a></li>
    </ul>

</nav>

<nav id="nav_mobile"> 

<ul>
    <li><a href="#">Menu</a>
        <ul>
        <li><a href="template_test.html">Home</a></li>
        <li><a href="#dt">Downtown Tour</a></li>
        <li><a href="#gt">Growth Tour</a></li>
        <li><a href="#lt">Landmarks Tour</a></li>
        <li><a href="#ct">Contact</a></li>

</ul>
</ul>


</nav>

Answer 1

您需要在课程中进行一些更改，如下所示 -

#nav_mobile ul ul {
    background: #fff none repeat scroll 0 0;
    display: none;
    left: 0;
    padding: 0;
    position: absolute;
    top: 24px; <!-- change this to 24px -->
}

#nav_mobile ul li {
    float: left;
    margin: 0;
    padding: 0;
    <!-- position: relative; (remove it) -->
}

#nav_mobile ul {
    float: none;
    list-style: outside none none;
    margin: 0;
    padding: 0;
    <!-- position: relative; (remove it) -->
}

Answer 2

你必须给ul元素一个display属性，不要让它浮动：

#nav_mobile ul{
    float:none;
    display:inline;
}

现在您应该看到整个菜单！

在移动设备的下拉菜单中摆脱滚动条

2 个答案: