CSS下拉菜單，浮動重置不起作用，爲什麼？

我想用'float：none'來製作一個css下拉菜單。以使子菜單li以實際的默認列表格式顯示。但是，由於某種原因，它不能按預期工作，所以我決定將代碼提交給您，以便您可以向我解釋。提前致謝。CSS下拉菜單，浮動重置不起作用，爲什麼？

下面是HTML：

<div class="top_menu"> 
     <ul> 
      <li><a href="#">Home</a> </li> 
      <li> 
       <a href="#">Habits</a> 
       <ul class="sub_menu"> 
        <li><a href="#">Femme </a></li> 
        <li><a href="#">Homme </a></li> 
        <li><a href="#">Enfant </a></li> 
       </ul> 

      </li> 
      <li><a href="#">Déco </a></li> 
      <li><a href="#">Liste </a></li> 
      <li><a href="#">Contact </a></li> 
     </ul> 
    </div>

而現在的CSS：

.top_menu ul { 

list-style-type: none; 
margin: 0; 
padding: 0; 
} 

.top_menu ul li { 

float: left; 
} 

.sub_menu li { 

float: none; 
}

來源

2014-03-24 Brain_Flushr

不是100％，當然你在這裏試圖做什麼，也許你可以創建一個小提琴？在黑暗中拍攝，設置.sub_menu li來顯示：塊。 – Mark

你能否定義「不按預期工作」？ – 2014-03-24 19:22:33

感謝您的回答，通過「不能按預期工作」，我的意思是浮動重置並不適用於sub_menu li的所有，不知道爲什麼。 ... –

這是選擇優先級的問題。兩個選擇器都匹配葉子列表項，但.top_menu ul li比.sub_menu li具有更高的優先級，因爲它包含更多路徑步驟。

來源

2014-03-24 19:27:13 Telic

哦，我明白了！謝謝，現在我明白了！ :) –

只是這樣做：

.top_menu > ul > li { 
    float: left; 
}

，那麼你可以風格.sub_menu li請你。

來源

2014-03-24 19:25:04

感謝您的建議，它運作良好！ –

如果我正確理解你的問題，這可能適合你。

Demo Fiddle

在原來的CSS的樣式.top_menu是影響所有li子元素。你想使用>選擇，確保你只申請了上浮到top_menu li元素

CSS：

.top_menu > ul > li { 
    float: left; 
}

來源

2014-03-24 19:25:28 badAdviceGuy

CSS下拉菜單，浮動重置不起作用，爲什麼？

回答

相關問題