2012-06-05 35 views
2

我遇到了一些麻煩與下面的CSS。當滾動到下拉菜單時,它並不總是顯示下拉菜單。我有時需要嘗試多次才能使其工作。側滾動查看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; 
} 
+1

增加@ccept R 7 TE否則你不會得到良好的質量回答 – 2012-06-05 10:21:09

回答

1

嘗試減少#navMenu UL UL的頂部。

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

感謝的作品。 – greenpool

0

,而不是給出一個固定的寬度嘗試給一些margin和padding在你的#navMenu ul li a並對齊垂直居中給line-height等於給height。並嘗試給display:none#navMenu ul ul,而不是visibility:hidden和你#navMenu ul li:hover UL try顯示:塊能見度:可見;`

+0

感謝您的建議,我會嘗試一下。 – greenpool

+0

沒問題,但請不要忘記告訴我們你是成功還是失敗。謝謝。 – maksbd19

+0

對不起,我真的沒有工作。 – greenpool