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>旁边

click

此处提供完整的工作示例：http://jsfiddle.net/nhfHw/17/ 要查看问题，请将鼠标悬停在第1项＆gt;上子项目1.2可以很长

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

Answer 1

要让他们并排坐下，请在这些子display:inline-block（Fiddle）上使用UL：

#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;
}

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

1 个答案: