Question

I’m having some trouble with the the following css. when scroll side ways to a drop down menu it doesn’t always display the drop down. i have to attempt it multiple times sometimes to get it working.

Any help is appreciated, thanks.

please see here for real time view.

my code is below:

#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

Try decreasing the top of #navMenu ul ul.

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