jquery - 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;
}

JQUERY:

$(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 解决方案。但是您可能必须更改一些标记。