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下拉菜单，浮动重置不起作用，为什么？

回答

相关问题