Question

当用户将鼠标悬停在水平菜单上时，如何保持子菜单打开，直到另一个菜单项悬停在上面？这是源代码：

HTML

 <ul id="nav">
   <li><a href="/">Home</a></li>
   <li><a href="#">my Links</a>
     <ul>
       <li><a href="Link1">Link 1</a></li>
       <li><a href="Link2">Link 2</a></li>
     </ul>
   </li>
 </ul>

CSS

#nav {
    width:100%;
    margin:0;
    padding:12px 0 4px 0;
    height:30px;
    position:relative;
}
#nav li {
    float:left;
    list-style:none;
    display:inline
}
#nav a {
    text-decoration:none;
}
#nav li ul li a {
    margin:0
}
#nav .active a, #nav li:hover>a {
    background:#ac2024;
    color:#fff;
}
#nav li a:hover, #nav ul a:hover {
    background:#ac2024;
    color:#fff
}
#nav ul {
    position:absolute;
    left:0;
    height:27px;
    width:100%;
    display:none;
}
#nav li:hover>ul {
    display: inline;
}
#nav ul a {
    width:100%
}
#nav:after {
    content:".";
    display:inline;
    clear:both;
    visibility:hidden;
    height:0
}
#nav {
    display:inline-block
}

如果用CSS无法做到这一点，如何用jQuery完成？感谢。

Answer 1

根据您更新的问题，修改后的答案。

您需要添加我评论中提到的少量JS，请参阅此处进行演示

JSFiddle (updated)

更新了HTML：

  <ul id="nav">
   <li><a href="/">Home</a></li>
   <li><a id="hover1" href="#">my Links</a>
     <ul id="visible1">
       <li><a href="Link1">Link 1</a></li>
       <li><a href="Link2">Link 2</a></li>
     </ul>
   </li>
   <li><a id="hover2" href="#">Our Links</a>
     <ul id="visible2">
       <li><a href="Link1">Link 3</a></li>
       <li><a href="Link2">Link 4</a></li>
     </ul>
   </li>
 </ul>

更新了CSS：

    #nav {
    width:100%;
    margin:0;
    padding:12px 0 4px 0;
    height:30px;
    position:relative;
}
#nav li {
    float:left;
    list-style:none;
    display:inline
}
#nav a {
    text-decoration:none;
}
#nav li ul li a {
    margin:0
}
#nav .active a, #nav li:hover>a {
    background:#ac2024;
    color:#fff;
}
#nav li a:hover, #nav ul a:hover {
    background:#ac2024;
    color:#fff
}
#nav ul {
    position:absolute;
    left:0;
    height:27px;
    width:100%;
    display:none;
}
#nav li:hover>ul {
    display: inline;
}
#nav ul a {
    width:100%
}
#nav:after {
    content:".";
    display:inline;
    clear:both;
    visibility:hidden;
    height:0
}
#nav {
    display:inline-block
}
.result_hover {
    display:block !important;
}

更新了JQuery：

$("#hover1").hover(
  function () {
      $("#visible1").addClass("result_hover");
      $("#visible2").removeClass("result_hover");
  }
);

$("#hover2").hover(
  function () {
      $("#visible2").addClass("result_hover");
      $("#visible1").removeClass("result_hover");
  }
);

Answer 2

我认为你只能用CSS实现这一目标。

我最重要的解决方案是添加课程＆＃39; hover-class＆＃39;通过jQuery到li项目，并将鼠标悬停在新菜单项上添加＆＃39; hover-class＆＃39;到新项目并将其从旧项目中删除。你应该在JS中跟踪已经悬停的最后一项，并根据这些数据操纵视图。

但也许有人会让我感到惊讶并只在CSS中提供解决方案:)希望它有所帮助。

在mouseout后保持子菜单处于活动状态

2 个答案: