2016-11-28 142 views
0

嗨,我試圖找出如何讓滾動條不是在下拉菜單中,顯示了對this page移動視圖時顯示。擺脫的滾動條,下拉菜單中的移動

[這是問我在發佈之前的更多細節,我沒有任何除了說,我添加了一些JavaScript到這個頁面和jQuery,但刪除它,並有同樣的問題,所以我不認爲這是它]

移動導航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> 
+0

下拉菜單中不會出現在你的網頁 –

回答

0

你必須給UI元素的顯示屬性,不要讓它浮動:

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

現在你應該看到整個菜單!

+0

這種簡單的解決方案工作....謝謝! – dmengstrom

0

你需要作出一些改變你的類一樣,如下 -

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