1

我有这个菜单只使用 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 中执行此操作的最佳方法是什么？

4

1 回答 1

2

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

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

对于绑定点击，这是使用纯 JS 的方法：如何在没有框架的情况下将点击绑定到锚点 (javascript)

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

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

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

#nav ul li.open ul {
  display:block;
}
于 2013-08-28T13:00:56.733 回答