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未设置为隐藏，而是其子元素（标记）这一事实。出于这个原因，将鼠标悬停在ul.drop_down_menu上仍会触发其父li标记的悬停状态（触发转换的原因）。

添加此项解决了问题：

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

JSFiddle

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

1 个答案: