将两个 ul 元素并排放置在菜单中并更改为单击而不是悬停

Question

我有这个菜单只使用 CSS 和 HTML。 有些子菜单很长，所以我想将它们细分为最多 5 个项目的单独列表，并将它们并排显示，而不是在彼此下方显示。

所以我将它们放在<div> 中并创建了 2 个单独的 <ul> 项目。我尝试将它们设为display: inline 并将<div> 的最大高度设置为100px，但这并没有真正强制浏览器将第二个<ul> 放在第一个旁边。

       <li>
                <a href="#">Sub Item 1.2 Can be long</a>
                <div>
                <ul>
                    <li><a href="#">Sub Item 1.2.1</a></li>
                    <li><a href="#">Sub Item 1.2.2</a></li>
                    <li><a href="#">Sub Item 1.2.3</a></li>
                    <li><a href="#">Sub Item 1.2.4</a></li>
                    <li><a href="#">Sub Item 1.2.5</a></li>
                 </ul>
                <ul>
                    <li><a href="#">Sub Item 1.2.6 From here should be in 2nd col</a></li>
                    <li><a href="#">Sub Item 1.2.7</a></li>
                    <li><a href="#">Sub Item 1.2.8</a></li>
                    <li><a href="#">Sub Item 1.2.9</a></li>
                    <li><a href="#">Sub Item 1.2.10</a></li>
                 </ul>

                </div>
            </li>

完整的工作示例在这里：http://jsfiddle.net/nhfHw/17/ 要查看问题，只需将鼠标悬停在Item 1 > Sub Item 1.2 Can be long

除此之外，我想让菜单在 click 而不是 hover 上打开子级别，但我想仅使用 CSS 是不可能的。在 javascript 中执行此操作的最佳方法是什么？

Answer 1

要让他们并排坐着，请在这些子子上使用display:inline-block ULs (Fiddle)：

#nav ul li ul li ul 
{
  display:inline-block;
  float:none;
}

为了绑定点击，这里是纯JS的方法：How do I bind a click to an anchor without a framework (javascript)

如果你想使用 jQuery，我建议切换一个类并在 css 中使用它来显示/隐藏导航：

$('#nav li').bind('click', function() {
  $(this).toggleClass('open');
}

然后在您的 CSS 中执行以下操作：

#nav ul li.open ul {
  display:block;
}