創造一個像菜單

我試圖與下拉每個項目的菜單導航欄層次，我理解需要有知名度和CSS什麼不可以，但我不確定如何做到這一點。創造一個像菜單

只是要清楚標識要像

Food | Houseware | Toys 
----- 
Breakfast 
Lunch 
Dinner 
Snack > Orange 
     banana 
     apple

<section id="navbar"> 
     <ul> 
      <li><a href=#> Food </a></li> 
      <li><a href=#> Houseware 
       <ul> 
        <li><a href=#> Breakfast </a></li> 
        <li><a href=#> Lunch </a></li> 
        <li><a href=#> Dinner </a></li> 
        <li><a href=#> Snacks </a></li> 
       </ul> 
      </a></li> 
      <li><a href=#> Toys </a></li> 
     </ul> 
</section>

這是我此刻的代碼，它創造沿頂，但「早餐晚餐吧午餐小吃「位，我猜需要隱藏，直到:hover用於每個特定的<li>。我想我關於問題的一輪是在列表中列出一個列表嗎？如果是的話，那麼有人可以解釋什麼使用的概念，使其隱藏，直到懸停（也可以確保它作爲另一個菜單下拉菜單的右側）。

任何幫助將不勝感激。

來源

2014-04-02 Chris Wakeling

[jsfiddle]（http://www.jsfiddle.net）好嗎？ – imtheman

[的jsfiddle（http://jsfiddle.net/QuenchingTurtle/XRxxy/）這是用提供第一下面的答案......，似乎一切都推出的一個明確的方式：既;有點時尚。 –

正如BLOOD-BATH說的那樣，使用「>」選擇器來選擇直接子元件，這將有助於子菜單項目的造型。例如：當您將樣式添加到#navbar > ul > li時，它會將樣式應用於li項目Food, Houseware, Toys。

若要隱藏子菜單項的初始值，請使子菜單項display:none和懸停使其成爲display:block。在子菜單項上使用position:absolute。

This fiddle可能會幫助你。

HTML

<section id="navbar"> 
    <ul> 
     <li><a href="#"> Food </a></li> 
     <li><a href="#"> Houseware 
      <ul> 
       <li><a href="#"> Breakfast </a></li> 
       <li><a href="#"> Lunch </a></li> 
       <li><a href="#"> Dinner </a></li> 
       <li><a href="#"> Snacks </a> 
        <ul> 
         <li><a href="#">Orange</a></li> 
         <li><a href="#">Banana</a></li> 
         <li><a href="#">Apple</a></li> 
        </ul> 
       </li> 
      </ul> 
      </a></li> 
     <li><a href=#> Toys </a></li> 
    </ul> 
</section>

CSS

ul{ 
    list-style:none; 
    padding:0; 
} 

ul li{ 
    position:relative; 
} 

#navbar > ul > li{ 
    display:inline-block; 
    background-color: #ccc; 
} 

#navbar ul ul{ 
    display:none; 
    position:absolute; 
    top:100%; 
    background-color:#fadde8; 
} 

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

#navbar ul ul ul{ 
    top:0; 
    left:100%; 
    background-color:#71efd3; 
}

來源

2014-04-02 05:09:42 James

你也可以添加子菜單項的動態突出顯示，如：「.navbar ul li ul：hover {background-color：＃FF0000;}」 – TextGeek

的> selector是你所需要的。它選擇一個元素的指定子對象，在這種情況下，UL 兒童一個裏的。

li>ul{ 
    display:none; 
} 
li:hover>ul{ 
    display:block; 
}

來源

2014-04-02 03:20:31

隨着其他的答案，你讓另一個錯誤是，你無法關閉<一>標籤右邊的第二個列表之前，還</li>已折舊且不需要代碼。如果你可以幫助我，我試圖列出一個列表，而不是往下走，向右走，就像當你瞄準列表中的第二個選項時一樣，但是對於所有選項。

來源

2017-04-13 20:58:34 Firestar

創造一個像菜單

回答

相關問題