菜单子菜单悬停

Question

说明：我已经建立，当用户将鼠标悬停在菜单它显示一个子菜单的菜单。 （该菜单使用jQuery）。另外，我的菜单的设置方式是，如果用户将鼠标悬停在菜单上的某个div上，jQuery将使用该div名称并附加一个子菜单ID，该ID指示jQuery显示哪个子菜单div。

jQuery的使用：

$(function() { 
    $('#nav div').hover(function() { 
     var menu_name = $(this).attr('id'); //gets current div id 
     sub_menu_name = '.sub_' + menu_name; //creates the sub menu that matches that div menu 
     $(sub_menu_name).css('display', 'block'); 
    }, function() { 
     $(sub_menu_name).css('display', 'none'); 
    });  
}); 

的jsfiddle链接：请查看：

[1]：http://jsfiddle.net/tech_noob/nXR5Y/1/地看到，我用这个菜单中的所有代码。

问题：当用户悬停在菜单上并尝试将鼠标悬停在子菜单上时，子菜单也会消失。如果用户将鼠标悬停在子菜单上，并且只有在用户远离子菜单或移动到新的菜单链接时，我才希望子菜单保持原状。如果可能的话，我还想保留我在HTML中使用的代码结构（例如，我已经看到其他菜单，开发人员使用子菜单作为子菜单作为相应菜单链接父项）。

侧面说明：在我的本地主机的UI显示在各自菜单链接的子菜单上的jsfiddle，子菜单关闭。不确定为什么，但这是一个小问题。

Answer 1

这比你有什么长一点，但它处理所有，如果您需要尽可能它也处理的菜单和子菜单，只要你保持这些名称花茎。如果您更改名称，那么您需要更改代码。

Example

// a little prep work would really help make this easier 
// something like: 
var tmrMenu; // used to keep submenu open long enough for hover over 
// select only menu items via class name 
// and add data variable containing the element you want 
//  you could also hard code this in HTML like: <div data-sub-menu=".sub_menu_1" ... 
//  and later select it using something like: $($('menu_1').data('sub-menu')) 
$("#nav [class^='menu_']").each(function(i) { $(this).data('subMenu', $('#nav .sub_' + $(this).attr('id'))); }) 
// now each menu has its sub-menu directly associated 
// we continue the chain 
.on('mouseenter', function(e) { 
    clearTimeout(tmrMenu); // clears hiding timer 
    var sub = $(this).data('subMenu'); 
    $("#nav [class^='sub_menu']").not(sub).hide(); // ensure siblings are hidden 
    sub.show(); 
}) 
.on('mouseleave', function(e) { 
    var $this = $(this); 
    tmrMenu = setTimeout(function() { 
     $this.data('subMenu').hide(); 
    }, 250); // a decent amount of time to reach a sub menu 
}); 

// now a little work on sub-menus 
$("#nav [class^='sub_menu']").on('mouseenter', function(e) { 
    clearTimeout(tmrMenu); // clears hiding timer 
}) 
.on('mouseleave', function(e) { 
    var $this = $(this); 
    tmrMenu = setTimeout(function() { $this.hide(); }, 250); 
}); 

Example

其余的一切都取决于你和CSS！希望这可以帮助！请享用！

Answer 2

你已经过于复杂的自己这一点。这可以并且应该用不同的HTML（嵌入式UL）和CSS完成，根本不需要jQuery。请参阅my example，它使用的代码少得多，并且是由CSS驱动的。

HTML：

<ul id="nav"> 
    <li>Menu 1 
     <div> 
      <ul> 
       <li><a href="#">Sub Menu Item 1</a></li> 
       <li><a href="#">Sub Menu Item 2</a></li> 
       <li><a href="#">Sub Menu Item 3</a></li> 
      </ul> 
     </div> 
    </li> 
    <li>Menu 2 
     <div> 
      <ul> 
       <li><a href="#">Sub Menu Item A</a></li> 
       <li><a href="#">Sub Menu Item B</a></li> 
       <li><a href="#">Sub Menu Item C</a></li> 
      </ul> 
     </div> 
    </li> 
    <li>Menu 3 
     <div> 
      <ul> 
       <li><a href="#">Sub Menu Item X</a></li> 
      </ul> 
     </div> 
    </li> 
</ul> 

CSS：

body, 
html { 
    padding: 10px; 
} 
ul { 
    list-style: none; 
    padding: 0; 
    margin: 0; 
} 
li { 
    padding: 0; 
} 
#nav { 
    position: relative; 
    height: 30px; 
    float: left; 
    cursor: default; 
} 
#nav > li { 
    font-size: 120%; 
    font-weight: bold; 
    background: #ccc000; 
    height: 50px; 
    width: 150px; 
    float: left; 
    text-align: center; 
    border: 1px solid #000; 
    line-height: 2.2; 
} 
#nav > li > div { 
    position: absolute; 
    left: 0; 
    top: 50px; 
    padding: 10px 0; 
    width: 100%; 
    font-weight: normal; 
    font-size: 80%; 
    display: none; 
} 
#nav > li:hover > div { 
    display: list-item; 
} 
#nav > li > div > ul { 
    background: orange; 
    width: 250px; 
    border: 1px solid #000; 
    text-align: left; 
    padding: 0 20px; 
} 
a { 
    text-decoration: none; 
    color: #000; 
} 

Answer 3

的事情是，你可以使用纯CSS复制此完全相同的效果。您的代码存在的问题是，当您悬停主菜单时，它仅适用于sub_menu上的“display：block”。而且因为sub_menu甚至不是主菜单的一部分，所以即使您将鼠标悬停在该菜单上，该功能也不会发生。

就像什么MiniRagnarok建议，具有子菜单作为孩子的div将做到这一点的最好办法。

您可以在主菜单中添加一个通用类，如“菜单”，并在子类菜单中添加子菜单。可以使sub_menu出现使用这种样式：

.menu:hover .sub_menu{ 
    display: block; 
} 

这里有一个小提琴：http://jsfiddle.net/nXR5Y/8/

你也应该调整子菜单有点顶端，因为差距是一个问题。但是如果你真的需要这个差距，你可以把sub_menu放到另一个div中，并将上面的样式应用到那个div而不是.sub_menu。

希望有所帮助。

Answer 4

请参阅My Example。这是小代码，并运行wordpress。

HTML：

<div id="ewm_header"> 
    <div class="container"> 
     <div class="row"> 
      <div class="col-md-12"> 
       <header id="ewm_header1"> 
        <div class="logo"> 
         <a href="http://cssmenufree.com" title="logo"> 
          <img src="http://cssmenufree.com/img/logo.png" alt="logo" data-retina="http://cssmenufree.com/img/logo@2x.png" width="131" height="21"> 
         </a> 
        </div> 
        <div class="menu-nav right"> 
         <nav class="mainnav" id="mainnav"> 
          <ul class="menu-wrap anima-bottom"> 
           <li class="children"> 
            <a href="#">HOME</a> 
            <ul class="sub-menu" style="margin-left: 0px;"> 
             <li class="children"> 
              <a href="#">HOME VERSION 1</a> 
              <ul class="sub-menu"> 
               <li class=""><a href="#">HOME DARK</a></li> 
               <li class=""><a href="#">HOME LIGHT</a></li> 
              </ul> 
             </li> 
             <li class=""><a href="#">HOME VERSION 2</a></li> 
             <li class=""><a href="#">HOME VERSION 3</a></li> 
            </ul> 
           </li> 
           <li class="children"> 
            <a href="#">ABOUT</a> 
            <ul class="sub-menu" style="margin-left: 0px;"> 
             <li class=""><a href="#">ABOUT VERSION 1</a></li> 
             <li class=""><a href="#">ABOUT VERSION 2</a></li> 
            </ul> 
           </li> 
           <li class=""><a href="#">PORTFOLIO</a></li> 
           <li class=""><a href="#">BLOG</a></li> 
           <li class=""><a href="#">SERVICES</a></li> 
           <li class=""><a href="#">CONTACT</a></li> 
          </ul> 
         </nav> 
        </div> 
       </header> 
      </div> 
     </div> 
    </div> 
</div> 
<span>You can copy code css. It run with menu in wordpress</span> 

CSS：

#ewm_header { 
    background: #011d27; 
    float: left; 
    padding: 15px; 
} 

#ewm_header a { 
    color: #fff; 
    text-decoration: none; 
} 

#ewm_header a:hover { 
    color: #11c21d; 
} 

#ewm_header ul { 
    list-style: none; 
    margin: 0; 
    paddingL 0; 
} 

.logo { 
    float: left; 
    margin-right: 30px; 
} 

.menu-wrap > li { 
    float: left; 
    position: relative; 
    padding: 5px 15px; 
} 

.menu-wrap li ul { 
    position: absolute; 
    visibility: hidden; 
    top: 100%; 
    left: 0; 
    background: #011d27; 
    z-index: 999; 
    width: 200px; 
} 

.menu-wrap li:hover > ul, 
.menu-wrap li ul li:hover ul { 
    visibility: visible; 
} 

.menu-wrap li ul li { 
    padding: 10px 5px; 
} 

.menu-wrap li ul li ul { 
    left: 100%; 
    top: 0; 
}