下拉水平显示的CSS菜单项？

Question

我在使用CSS方面遇到了一些麻烦（对我来说这是相当新的） - 希望有人能在我的各种互联网搜索证明无效之后给出一些建议。

我的问题是我有CSS菜单，我最近改变了主菜单元素的宽度，但我正在努力调整下拉子元素的大小以反映这个新的大小 - 子菜单项现在也出现了相互之间而不是彼此之下。

感谢任何帮助！

JSFiddle：https://jsfiddle.net/anwwgyu8/

CSS：

var path = window.location.pathname;
path = path[0] == '/' ? path.substr(1) : path;

Answer 1

Float在子菜单项上继承。您应清除子菜单的浮动：

.buttonbar1 li ul li {
    /* ... */
    float: none;
    width: 100%;
}

https://jsfiddle.net/anwwgyu8/11/

Answer 2

您的浮动和宽度特性正在向下移动到子菜单列表项。添加以下CSS：

.buttonbar1 li ul li {
    display:block;
    float:none;
    width:100%;
}

Answer 3

.buttonbar1 li ul li{
 width:100%;
}

小提琴：https://jsfiddle.net/anwwgyu8/6/