css - 将两个 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

要让它们并排放置，请在那些子子 UL ( Fiddle ) 上使用 display:inline-block:

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

对于绑定(bind)点击，这里是使用纯 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;
}