Question

我有一个带嵌套子菜单的垂直菜单，点击后子菜单显示正常。我希望子菜单保持打开，即使用户将鼠标移动到子菜单悬停区域之外。所以它实际上是一组配对列表。

<nav id="menu">
  <ul id ="navigation">
    <li><a id="fly1" href="#" >First menu</a>
      <ul id="dropdown1">
        <li><a href="#">Item 1</a></li>
        <li><a href="#">tem 2 </a></li>
        <li><a href="#">tem 3</a></li>
      </ul>
    </li>

    <li><a id="fly2" href="#" >second menu</a>
      <ul id="dropdown2">
        <li><a href="#"> tem A</a></li>
        <li><a href="#">item B</a></li>
        <li><a href="#">item C</a></li>
      </ul></li>
    </ul>
  </nav>

到目前为止，这是css。它工作正常，但子菜单不会保持开放。

#menu {
  overflow: auto;
  position: relative;
  z-index: 2;
}

#navigation {
  background-color: #0c8fff;
  min-width: 200px;
  float: left;
}

#menu ul {
  list-style-type: none;
}

#menu ul li a {
  padding: 10px 15px;
  display: block;
  color: #333;
  text-decoration: none;
}

#menu ul li:hover > ul {
  left: 200px;
}

#menu ul li > ul {
  position: absolute;
  background-color: #fff;
  top: 0;
  z-index: -1;
  left: -200px;
  min-width: 200px;
  height: 100%;
}

#menu ul li > ul li a:hover {
  background-color: #2e2e2e;
}

Answer 1

我认为只有html和css才能达到这个效果。在这里，它是JQuery的一个可能的解决方案：

Html与你的相同。

CSS：

#menu {
  overflow: auto;
  position: relative;
  z-index: 2;
}


#navigation {
  background-color: #0c8fff;
  min-width: 200px;
  float: left;
}

#menu ul {
  list-style-type:none;
}

#menu ul li a {
  padding:10px 15px;
  display:block;
  color:#333;
  text-decoration:none;
}

#menu ul li > ul {
  position: absolute;
  background-color: #fff;
  top: 0;
  /*z-index: -1;
  left: -200px; */
  min-width: 200px;
  height: 100%;
  left: 200px;
  display: none;
}

#menu ul li > ul li a:hover {
  background-color:#2e2e2e;
}

使用Javascript：

(function() {
  $('[id^=fly]').click( function() {
    $(this).siblings().toggle();
  });
})();

以下是工作JSFiddle的链接：http://jsfiddle.net/qbukx26j/

请记住，您可能需要添加更多逻辑，因为如果您在关闭另一个子菜单之前打开一个子菜单，我的解决方案就不会跟踪子菜单是否已打开以及它是否有错误。< / p>

EDIT 子菜单仅显示到某一点，因为#menu的溢出设置太自动：这意味着如果内容大于容器，某些浏览器将显示滚动条。如果你删除它，它只是工作。这是新的JSFiddle：http://jsfiddle.net/1s2zm2b0/

Answer 2

好的所以我稍微更改了html和js（带有一些jquery示例）

<nav id="menu">
        <ul id ="navigation">
            <li class="fly"><a  href="#" >First menu</a>
                <ul class="submenu">
                    <li><a href="#">item 1</a></li>
                    <li><a href="#">item 2 </a></li>
                    <li><a href="#">item 3</a></li>
                    <li><a href="#">item 4</a></li>
                </ul>
            </li>

            <li class="fly"><a  href="#" >second menu</a>
                <ul class="submenu">
                    <li><a href="#">item A</a></li>
                    <li><a href="#">item B</a></li>
                    <li><a href="#">item C</a></li>
                </ul></li>
        </ul>
    </nav>

和js ......

$(document).ready(function(){
    $(".fly .submenu").hide(); 

    $(".fly a").click(function(){
        $(".fly .submenu").hide(); 
        $(this).parent().find("ul").toggle(); 
    });
});

现在它来回切换菜单保持打开状态。这是我想要的。

请参阅小提琴：http://jsfiddle.net/rdutoit/em6LxdLc/但现在出现了一个新问题。显示子菜单但仅达到一定长度，该长度可能比主列表长度多1个项目。有任何想法吗？谢谢，Rob

鼠标输出后，HTML子菜单不会保持打开状态

2 个答案: