带垂直的水平下拉菜单答案

【问题标题】：Horizontal dropdown menu with vertical带垂直的水平下拉菜单
【发布时间】：2016-11-29 09:49:29
【问题描述】：

我正在尝试修改模板导航栏以使其具有下拉菜单 how-to 悬停，但我似乎无法让 sub 2 低于 sub 1。

我还注意到，当放置到移动设备尺寸并悬停时，东西会破裂。（但那是因为我还没有担心媒体屏幕）。

有什么想法吗？

HTML

<!-- Navigation options -->
<nav class="clearfix">
    <ul class="clearfix">

        <li><a href="#">Home</a></li>
        <li><a href="#">How-to</a>
<ul id="submenu">
<li><a href="#">sub1</a>
<li><a href="#">sub2</a>
</ul> <!--end sub ul-->
        </li>
        <li><a href="#">Icons</a></li>
        <li><a href="#">Design</a></li>
        <li><a href="#">Web 2.0</a></li>
        <li><a href="#">Tools</a></li>  
    </ul> <!-- end ul clearfix -->
    <a href="#" id="pull">Menu</a>
</nav> <!-- end nav clearfix -->

CSS

.clearfix li:hover ul {
display: block;
}

.clearfix li ul {
display: none;
position: absolute;
top:100%;
background: #455868;
width: auto;
height: auto;
vertical-align: top;
}

.clearfix li ul li {
width: auto;
}

.clearfix li ul a {
display: block;
}

完整代码见 Fiddle： https://jsfiddle.net/m7tnf8ao/

【问题讨论】：

标签： html css navigation submenu

【解决方案1】：

您的子菜单 li 元素正在从 nav li 规则中选择一个浮点数。

在 jsfiddle 的第 38 行添加：

.clearfix li ul li {
  width: auto;
  float:none; /* <- this one here */
}

【讨论】：

【解决方案2】：

要使 sub 2 出现在 sub1 下，请关闭子菜单的浮动属性：

#submenu li {
  float: none;
}

第二个问题解决了：

@media screen and (max-width: 600px) {
  #submenu {
    position: static;
  }
}

【讨论】：