子菜单不垂直显示答案

【问题标题】：Submenu not appearing vertical子菜单不垂直显示
【发布时间】：2015-01-05 19:29:45
【问题描述】：

我已经为此奋斗了大概 6 个小时，完全被难住了。我无法让子菜单在鼠标悬停时垂直显示。这是来自 cssdesk 的链接。我在搞砸什么？我知道这很简单。

http://www.cssdesk.com/n8WCm

如果链接不适合你，请看这个sn-p：

.nav8 ul .sub-menu{
    position:absolute;
    display:none;
}

.nav8 li:hover ul.sub-menu {
    display: block;
    background:#000;
    border: 1px solid #ececec;
}

如果你需要更多，请告诉我。

【问题讨论】：

Cssdesk 似乎根本不起作用（至少在我的谷歌浏览器中）。将此处的代码粘贴到代码段中。
.nav8 ul .sub-menu{ position:absolute;显示：无； } .nav8 li:hover ul.sub-menu { display: block;背景：#000;边框：1px 实心#ececec； }

标签： css submenu

【解决方案1】：

添加到你的 CSS

.nav8 ul li li{
    clear:both;
}
.nav8 ul li ul{
    width:20% !important;
}

【讨论】：

【解决方案2】：

你应该让它不像主菜单那样向左浮动，所以我建议在每个子菜单之后清除它并给它一个固定的宽度

  .nav8 li:hover ul.sub-menu li {
       clear:both;
       width: 200px;
    }

【讨论】：

有没有办法让它有一个填充而不是固定宽度？我有一些需要多达 400 像素，而另一些则需要 100 像素。只是想获得一些统一性
你可以添加一个类，这样你就有了 .sub-menu li.small { width: 100px; } 或子菜单 li.large { width: 400px; }