Question

我正在尝试创建导航。菜单中包含categories，subcategories和jquery中的subcategories。但它不起作用。我不想通过粘贴许多html和css代码弄脏。我创建了一个jsFiddle，让我觉得更容易跟踪。这是我的jsFiddle：JSFIDDLE url 从我的html代码中可以看出，里面有3个菜单。首先，如果LINK徘徊我希望类别追加，然后如果其中一个类别徘徊，其子类别应该显示，依此类推。谢谢。

Answer 1

我相信这可以用纯CSS方法完成吗？这样的事情怎么样：

<强> HTML

<ul id="categories">
  <li>
    <a href="#">Item 1</a>
    <ul>
      <li>
        <a href="#">Sub-Item 1</a>
        <ul>
          <li><a href="#">Another Sub-Item 1</a></li>
          <li><a href="#">Another Sub-Item 1</a></li>
          <li><a href="#">Another Sub-Item 1</a></li>
        </ul>
      </li>
      <li>
        <a href="#">Sub-Item 2</a>
        <ul>
          <li><a href="#">Another Sub-Item 1</a></li>
          <li><a href="#">Another Sub-Item 2</a></li>
          <li><a href="#">Another Sub-Item 3</a></li>
        </ul>
      </li>
    </ul>
  </li>
  <li>
    <a href="#">Item 2</a>
    <ul>
      <li>
        <a href="#">Sub-Item 1</a>
        <ul>
          <li><a href="#">Another Sub-Item 1</a></li>
          <li><a href="#">Another Sub-Item 2</a></li>
          <li><a href="#">Another Sub-Item 3</a></li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

<强> CSS

#categories ul {
  height: 0;
  overflow: hidden;
}

#categories li:hover > ul {
  height: auto;
}

只需改进CSS以满足您的需求，但基本上就是结构。

Answer 2

尝试隐藏菜单以外的子菜单。

$('h3.tumKat').hover(function() {
    $('.menu1ul').slideDown(350);
});

$(".menu1ul").hover(null, function() {

    $('.menu1ul').slideUp(350);;

});

它满足你吗？

如何在链接悬停时保持打开子菜单？

2 个答案: