Javascript Onclick 菜单答案

【问题标题】：Javascript Onclick MenuJavascript Onclick 菜单
【发布时间】：2015-07-11 08:10:33
【问题描述】：

我使用了这个演示：

要做到这一点：

我唯一需要的是确保子菜单也水平显示。但我对 CSS 的理解还不够，无法让它发挥作用。另外，我正在创建它以用于学习目的。

我觉得可能跟这个有点关系：

.testul li ul {
display: none;
list-style: none;
position: absolute;
left: 0;
}
.testul li ul li {
list-style: none;
white-space: nowrap;
height: 24px;
line-height: 24px;
background: -webkit-linear-gradient(#c8bfb0, #f5efe6);
border-bottom: 1px solid #d3c7b6;
}

【问题讨论】：

“也在水平显示”是什么意思？
您想在主菜单下方添加一个新“行”而不是“列”吗？
你到底想做什么？您是否希望 li 水平显示（从左到右，彼此相邻）而不是垂直显示？
另外我想指出：li > ul 不起作用，因为您无法使用 CSS 选择器“升级”。

标签： jquery css menu onclick

【解决方案1】：

只需将display: inline-block 添加为：

JSFiddle

.testul li ul li {
    display: inline-block;
    list-style: none;
    white-space: nowrap;
    height: 24px;
    line-height: 24px;
    background: -webkit-linear-gradient(#c8bfb0, #f5efe6);
    border-bottom: 1px solid #d3c7b6;
}

【讨论】：