下拉菜單內容和最後一個孩子

CODE:

http://jsfiddle.net/qyVMj/140/下拉菜單內容和最後一個孩子

當前下拉圖像：http://imgur.com/a/XY8gW

二級下拉菜單的內容出現在先前的頂部。「人」鏈接甚至不出現。

而且我也想把「聯繫人」放在ul的右側。

來源

2017-02-04 fabimetabi

請創建的jsfiddle，它是如此容易得多修復運行的代碼。 – frenchie

另外，知道你想要完成的事情會很有幫助。您是否試圖只顯示兩個subnav，或者當您點擊男性/女性時是否嘗試進行輔助導航？ –

我試圖讓兩個subnavs顯示當我盤旋。 @DanLeveille – fabimetabi

你想這是什麼代碼：

HTML：

<nav id="main_nav"> 
    <ul> 
     <li> 
      <a href="">Home</a> 
     </li> 
     <li> 
      <a href="">Products</a> 
      <ul> 
       <li> 
        <a href="">Women</a> 
        <ul> 
        <li><a href="">Hats</a></li> 
        <li><a href="">Jeans</a></li> 
        <li><a href="">Shirts</a></li> 
        </ul> 
       </li> 
       <li> 
        <a href="">Men</a> 
        <ul> 
        <li><a href="">Hats</a></li> 
        <li><a href="">Jeans</a></li> 
        <li><a href="">Shirts</a></li> 
        </ul> 
       </li> 
      </ul> 
     </li> 
     <li> 
      <a href="" style="float:right">Contact</a> 
     </li> 
    </ul> 
</nav>

CSS：

ul { 
list-style-type: none; 
margin: 0; 
padding: 0; 
overflow: hidden; 
background-color: gray; 
} 

li { 
float: left; 
} 

li a, .dropbtn { 
display: inline-block; 
color: white; 
text-align: center; 
padding: 14px 16px; 
text-decoration: none; 
} 

li a:hover, .dropdown:hover .dropbtn { 
background-color: #333; 
} 

li.dropdown { 
display: inline-block; 
} 

.dropdown-content { 
display: none; 
position: absolute; 
background-color: #f9f9f9; 
min-width: 160px; 
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); 
z-index: 1; 
} 

.dropdown-content a { 
color: black; 
padding: 12px 16px; 
text-decoration: none; 
display: block; 
text-align: left; 
} 

.dropdown-content a:hover {background-color: #f1f1f1} 

.dropdown:hover .dropdown-content { 
display: block; 
} 

ul:last-child li 
{ 
    border: none; 
    float: right !important; 
}

至於顏色和設計，你可以在CSS相應的改變。

的jsfiddle：https://jsfiddle.net/szs4Lapn/4/

鏈接

來源

2017-02-04 01:11:54 Thanasis

您的.dropdown-content div（絕對定位）包含兩個.dropdown-content div，它們也是絕對定位的，這就是爲什麼它們彼此重疊（以及爲什麼它們有陰影）。

拆卸分次資產淨值這些類修復它：

<div class="dropdown-content"> 
    <a href="#">Women</a> 
     <div> 
      <a href="#">Hats</a> 
      <a href="#">Jeans</a> 
      <a href="#">Shirts</a> 
     </div> 
    <a href="#">Man</a> 
     <div> 
      <a href="#">Hats</a> 
      <a href="#">Jeans</a> 
      <a href="#">Shirts</a> 
     </div> 
</div>

http://jsfiddle.net/qyVMj/141/

而且，它通常更好地結構上採用嵌套列表（<ul>和<li>）進行正確的語義和輔助導航。

來源

2017-02-04 00:49:53

它和我保持幾乎一樣。當我徘徊在「產品」上時，我只想成爲「女性」+「男性」。當我徘徊「女性」或「男性」時，會出現「帽子」，「牛仔褲」和「襯衫」。 @DanLeveille – fabimetabi

@fabimetabi啊，我明白了，這與我對你評論的解釋不同。 –

對不起。可悲的是，我也很糟糕地解釋了你的評論。 @DanLeveille – fabimetabi

下拉菜單內容和最後一個孩子

回答

相關問題