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

Question

嗨，我试图弄清楚如何使滚动条在移动视图中显示在此页面上显示的下拉菜单上不显示。

[它在发布之前要求我提供更多详细信息，除了说我在此页面上添加了一些JavaScript外，我没有任何细节它]

移动导航卡斯

#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;
}

NAV 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元素一个显示属性，不要让它浮动：

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

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