HTML/CSS/JQUERY - 不悬停在菜单上时下拉菜单消失

Question

我正在尝试创建一个下拉菜单，目前进展顺利。 我刚遇到1个问题。当我没有悬停在菜单标题上时，下拉菜单会消失，菜单上的悬停效果也会消失。 我的代码可能看起来很乱，而且有点复杂。我很抱歉。

JSFIDDLE：https://jsfiddle.net/eeLfkqjy/6/ HTML：

<div id="navBar">
        <div id="logo">

        </div>
        <div id="menu">
            <div id="menuTitle_Container">
                <a class="menuTitle" href="index.html">HOME</a>
                <a class="menuTitle" href="sneakers.html">MENU 1</a>
                <a class="menuTitle" href="clothing.html">MENU 2</a>
                <a class="menuTitle" href="acessories.html">MENU 3</a>
            </div>
        </div>
    </div>
        <div id="dropdownMenu">
            <div id="dropdownMenu_SubmenuContainer">
                <div class="submenu_Container">
                    <div class="submenu_menuContainer">
                        <p class="clotheCategory">TITLE</p>
                            <a class="submenuTitle">MENU 1</a>
                            <a class="submenuTitle">MENU 2</a>
                            <a class="submenuTitle">MENU 3</a>
                            <a class="submenuTitle">MENU 4</a>
                            <a class="submenuTitle">MENU 5</a>
                    </div>
                    <div class="submenu_menuContainer">
                        <p class="clotheCategory">TITLE</p>
                            <a class="submenuTitle">MENU 1</a>
                            <a class="submenuTitle">MENU 2</a>
                            <a class="submenuTitle">MENU 3</a>
                            <a class="submenuTitle">MENU 4</a>
                    </div>
                </div>                
                <div class="submenu_Container">
                    <div class="submenu_menuContainer">
                        <p class="clotheCategory">TITLE</p>
                            <a class="submenuTitle">MENU 1</a>
                            <a class="submenuTitle">MENU 2</a>
                            <a class="submenuTitle">MENU 3</a>
                    </div>
                    <div class="submenu_menuContainer">
                        <p class="clotheCategory">TITLE</p>
                            <a class="submenuTitle">MENU 1</a>
                            <a class="submenuTitle">MENU 2</a>
                            <a class="submenuTitle">MENU 3</a>
                            <a class="submenuTitle">MENU 4</a>
                            <a class="submenuTitle">MENU 5</a>
                    </div>
                </div>
            </div>
        </div>

CSS：

body {
 margin: 0; 
 background-color: green;
}
/* MENU */
#navBar {
    background-color: #464646;
    height: 65px;
    width: 100%; 
    display: -webkit-box;
}
#logo {
    width: 15%;
    margin-left: 2.5%;
    margin-right: 2.5%;
    height: 65px;
}
#menu {
    height: 65px;
    width: auto;
}
#menuTitle_Container{
    width: auto;
    display: -webkit-inline-box;
}
.menuTitle{
    font-family: 'Raleway', sans-serif;
    font-weight: 400;
    font-size: 17px;
    padding-right: 10px;
    padding-left: 10px;
    color: #fff;
    vertical-align: text-top;
    line-height: 65px;
    text-decoration: none;
    display: -webkit-block;
    display: block;
    transition: color 0.4s ease;
    transition: background-color 0.4s ease;
}
.menuTitle:nth-of-type(+n+2):hover {
    background-color: #fff;
    transition: background-color 0.4s ease, color 0.4s ease;
    color: #353535;
}

/* DROPDOWN MENU  ON HOVER */

#dropdownMenu {
    width: 750px;
    height: 250px;
    background-color: #fff;
    margin-left: 20%;
    display: none;
    opacity: 0;
}
#mensmenu {
    height: 100;   
}
.submenu_Container {
    width: 100%;
    margin: 0 auto;
    display: none;
}
.submenu_menuContainer {
    width: 50%;
    height: 190px;
    display: inline-block;
    margin-top: 30px;
    margin-left: 5%;
}
.submenu_menuContainer:nth-child(1) {
    border-right: 1px solid #B3B3B3;
}


.clotheCategory {
    font-family: 'open sans', sans-serif;
    font-size: 15px;
    color: #353535;
    font-weight: 600;
    margin-top: 10px;
    text-align: center;
}
.submenuTitle {
    font-family: 'open sans', sans-serif;
    font-size: 14px;
    font-weight: 400;
    color: #353535;
    margin-top: 10px;
    display: table;
}

查询：

$(document).ready(function() {
    $(".menuTitle:nth-child(2)").hover(function () {
        $("#dropdownMenu").show();
        $("#dropdownMenu").stop().animate({opacity:'1'}, 400);
        $(".submenu_Container:nth-child(1)").css("display","flex");
    }, function() {
        $("#dropdownMenu").hide();
        $("#dropdownMenu").stop().animate({opacity:'0'}, 400);
        $(".submenu_Container:nth-child(1)").css("display","none");
});    
    $(".menuTitle:nth-child(3)").hover(function () {
        $("#dropdownMenu").show();
        $("#dropdownMenu").stop().animate({opacity:'1'}, 400);
        $(".submenu_Container:nth-child(2)").css("display","flex");
    }, function() {
        $("#dropdownMenu").hide();
        $("#dropdownMenu").stop().animate({opacity:'0'}, 400);
        $(".submenu_Container:nth-child(2)").css("display","none");
});    
});

Answer 1

要轻松解决您的问题，您必须将hover 事件附加到您的菜单项和您的下拉列表中。看到这个Fiddle。

把这个：$(".menuTitle:nth-child(2)").hover(...改成这个$(".menuTitle:nth-child(2), #submenu_Container:nth-child(1)").hover(...

但是您页面上的所有 ID 都存在真正的问题。每个页面的 ID 必须是唯一的，类可以在一个页面上出现多次。

这使您的 jquery 选择器非常奇怪。 #submenu_Container:nth-child(2)

但对于简单的悬停，您应该尝试使用纯 CSS 解决方案。但您可能需要更改一些标记。

Answer 2

我邀请你看看如何用 CSS 来做这个

https://css-tricks.com/dropdown-menus-with-more-forgiving-mouse-movement-paths/

使用 javascript 进行悬停可能会导致悬停无法在手机或平板电脑上正确触发。

这是我在 2 分钟内制作的小菜单。 http://jsfiddle.net/warface/ky413pnk/

HTML

<ul id="mainmenu">
    <li>Main Menu</li>
    <li>Menu 1
        <ul class="submenu">
            <li>Submenu 1</li>
            <li>Submenu 2</li>
        </ul>
    </li>
    <li>Menu 2</li>
</ul>

CSS

#mainmenu{ list-style:none;  background:#000; color:#fff}
#mainmenu li{display:inline-block; position:relative; padding:4px 10px; border-right:1px solid #fff}

.submenu{display:none; background:#000; color:#fff; position:absolute; top:26px; left:0}
#mainmenu li:hover ul{display:block; margin:0; padding:0}
#mainmenu li ul li{white-space:nowrap; padding:4px 10px}