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

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 和 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 个项目。有任何想法吗？谢谢，罗伯

Answer 2

我认为仅使用 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/

请记住，您可能需要添加更多逻辑，因为如果两个子菜单都打开，我的解决方案不会跟踪，如果您在关闭另一个子菜单之前打开一个子菜单，则会出现问题。

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