Example

Question

说明：我建立了一个菜单，当用户将鼠标悬停在菜单上时会显示一个子菜单。（菜单使用jQuery）。此外，我的菜单设置方式是，如果用户将鼠标悬停在菜单上的某个div上，jQuery将获取该div名称并附加一个子菜单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

你自己过于复杂了。这可以而且应该用不同的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 2

它比你拥有的要长一些，但它可以处理所有你应该需要它的菜单和子菜单，只要你保持这些名称 - scapes。如果您更改名称，则需要更改代码。

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 3

问题是，您可以使用纯CSS复制相同的精确效果。您的代码存在的问题是它只适用于＆＃34; display：block＆＃34;当你徘徊主菜单时在子菜单上。由于sub_menu甚至不是主菜单的一部分，即使你将鼠标悬停在主菜单上，该功能也不会发生。

就像MiniRagnarok所建议的那样，将子菜单作为子div是最好的方法。

您可以在主菜单中添加一个通用类，如＆＃34; menu＆＃34;并使用类sub_menu将子菜单放入其中。你可以使用这个样式显示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;
}

菜单子菜单悬停

4 个答案:

Example

Example