css - 将鼠标悬停在内容区域上时出现下拉菜单

Question

出于某种原因，我将鼠标悬停在主导航选项卡下方的区域上，它会弹出下拉菜单。我一直在努力解决这个问题，并试图避免从一开始就写它。

有什么帮助吗？

这是我的 CSS 代码:

#primary_nav_wrapper {     
    position: relative; 
    top: 85px;      
    width: 100%;        
    height: 39px; 
    border-top: 1px solid rgb(90,90,90);
}

#primary_nav {

    position: absolute;
    margin: 0 2.5%;
    width: 95%;
    height: 100%;
}

/* Affects parent tabs only ============================================================================*/

#primary_nav > ul#all_parent_tabs {
    position: relative;
    margin: 0; 
    /* ^ Resets margin for the parent tabs in th primary nav. Removing affects position*/
    padding: 0; 
    /* ^ Resets padding for the parent tabs in th primary nav. Removing affects position*/
    height: 100%; 
    /*Sets ul*/
    list-style-type: none; 
    text-align: center;
    font-size: 14px;
}


#primary_nav > ul#all_parent_tabs > li {
    position: relative;
    float: left;
    list-style-type: none;
    width: 12.5%;
    height: 100%;
    display: block;
    -webkit-transition: all .3s;
    -moz-transition: all .3s;
    -ms-transition: all .3s;
    -o-transition: all .3s;
    transition: all .3s;
}

#primary_nav > ul#all_parent_tabs > li > a {
    display: block;
    text-decoration: none;
    color: rgb(133,133,133);
}

#primary_nav > ul#all_parent_tabs > li.parent_tabs_one_line > a{
    line-height: 39px;
}

#primary_nav > ul#all_parent_tabs > li.parent_tabs_two_line > a{
    padding: 4px 0 0 0;
}

#primary_nav > ul#all_parent_tabs > li:hover {
    background-color: rgb(248,248,248);
    -webkit-transition: all .3s;
    -moz-transition: all .3s;
    -ms-transition: all .3s;
    -o-transition: all .3s;
    transition: all .3s;
}


#primary_nav > ul#all_parent_tabs > li:hover > ul.drop_down_menu li a{
    visibility: visible;
    opacity: 1;
    -webkit-transition: .4s all .4s;
    -moz-transition: .4s all .4s;
    -ms-transition: .4s all .4s;
    -o-transition: .4s all .4s;
    transition: .4s all .4s;
}

#primary_nav > ul#all_parent_tabs > li#active_tab {
    border-bottom: 3px solid rgb(65,217,28);
    background-color: rgb(248,248,248);
    box-sizing:border-box;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    -ms-box-sizing:border-box;
    -o-box-sizing:border-box;
}

/* For drop-down menu ==================================================================================*/


#primary_nav > ul#all_parent_tabs > li > ul.drop_down_menu {
    position: absolute;
    margin: 0;
    padding: 0;
    height: 262px;
    width: 140%;
    top: 39px;
    text-align: left;
}

#primary_nav > ul#all_parent_tabs > li > ul.drop_down_menu > li {
    margin: 0;
    padding: 0;
    width: 140%;
    height: 26px;
    line-height: 26px;
    font-size: 13px;
    display: block;
}

#primary_nav ul#all_parent_tabs > li > ul.drop_down_menu > li > a{
    position: absolute;
    margin: 0;
    padding: 0 5px; 
    display: block;
    width: 140%; 
    background-color: rgb(240,240,240);
    border: 1px solid rgb(205,205,205);
    text-decoration: none;
    color: rgb(150,150,150);
    z-index: 1;
    visibility: hidden;
    opacity: 0;
}

#primary_nav ul#all_parent_tabs > li:hover > ul.drop_down_menu > li > a:hover {
    background-color: rgb(233,254,237);
    -webkit-transition: all .2s;
    -moz-transition: all .2s;
    -ms-transition: all .2s;
    -o-transition: all .2s;
    transition: all .2s;

Answer 1

问题是因为 ul.drop_down_menu 没有设置为隐藏，而是它的子元素(a 标签)。因此，将鼠标悬停在 ul.drop_down_menu 上仍会触发其父 li 标签的悬停状态(这是触发您的转换的原因)。

添加这个解决了问题:

ul.drop_down_menu {
    visibility:hidden;
}
li:hover ul.drop_down_menu {
    visibility:visible;
}

JSFiddle