Question

我在使用以下css时遇到了一些麻烦。当滚动侧面菜单到下拉菜单时，它并不总是显示下拉菜单。我有时需要多次尝试才能让它正常工作。

感谢任何帮助，谢谢。

请参阅here了解实时视图。

我的代码如下：

#navMenu{

    margin:0;
    padding:0;

}

#navMenu ul{
    margin:0;
    padding:0;
    line-height:30px;

}

#navMenu li {
    margin:0;
    padding:0;
    /*removes the bullet point*/
    list-style:none;
    float:left;
    position:relative;
    background: #fff;



}




/*for top level */
#navMenu ul li a{
    text-align:center;
    font-family:"calibri";
    text-decoration:none; /*remove underline*/

    margin:-1px;
    /*height width for all links*/
    height:30px;
    width:150px;
    display:block;
    /*border-bottom: 1px solid #ccc;*/



    color: #777;


}








/* hiding inner ul*/
#navMenu ul ul{
    position:absolute;
    visibility:hidden;
    /*must match height of ul li a*/
    top:32px;


}
/*selecting top menu to display the submenu*/

#navMenu ul li:hover ul{
    visibility:visible;



}

#navMenu li:hover{
    /*background-color: #F9F9F9;*/
    background-color: #596C56;
    }


#navMenu ul li:hover ul li a:hover{

   /* color: E2144A;*/
      color:blue;

}

#navMenu ul li a:hover{
        /*color: E2144A;*/
        color:#FFE303;
}

Answer 1

尝试减少#navMenu ul ul。

的顶部

#navMenu ul ul{
    position:absolute;
    visibility:hidden;
    /*must match height of ul li a*/
    top:29px;
    background:#333;
}

Answer 2

而不是给出固定的宽度，尝试在#navMenu ul li a中给出一些边距和填充，并将其垂直对齐，使line-height等于height。并尝试将display:none提供给#navMenu ul ul而不是visibility:hidden以及#navMenu ul li:hover ul try显示：阻止可见性：可见;`

滚动查看css下拉的方式并不总是有效

2 个答案: