2013-06-24 217 views
0

我想爲我的網站有一個非常基本的CSS下拉菜單。 這是代碼:下拉菜單消失懸停

#topNav { font-size: 12px; width: 970px; margin: 0 auto; height: 33px; background: url(images/menubg.png); /*border-bottom: solid 1px #cccccc;*/ } 
#topNav ul { margin: 0; padding: 0; list-style: none; margin: 0 auto; } 
#topNav ul li { height: 33px; float: left; padding: 0px; font: bold 12px/37px ; } 
#topNav ul li a{ padding: 0 18px; height: 33px; float: left; text-decoration: none; display: block; color: #7b7a76; font: 14px/37px Arial, Helvetica, sans-serif; } 
#topNav ul li a:hover { padding: 0 18px; height: 33px; /*float: left;*/ text-decoration: underline; display: block; color: #e52128; font: 14px/37px Arial, Helvetica, sans-serif; background: url(images/menuover.png); } 
#topNav ul li a:active { padding: 0 18px; height: 33px; /*float: left; text-decoration: none; display: block; color: #666666;*/ font: 14px/37px Arial, Helvetica, sans-serif; background: url(images/menuover.png); } 

和:

.nav, .nav ul { list-style: none; margin: 0; padding: 0; } 
.nav { font-family: Arial, Helvetica, sans-serif; z-index: 1000; position: absolute; } 
.nav li { float: left; margin: 0; padding: 0; position: relative; /*background: url(images/navbg.jpg) repeat-x 0 0 #292929;*/ } 
.nav li a, .nav li a:link, .nav li a:active, .nav li a:visited { font: bold 1.22em/25px Arial, Helvetica, sans-serif; color: #959595; display: block; padding: 0 9px; text-decoration: none; } 
.nav li a:hover { background: /*#f2f2f2*/ #FAFBFF; color: #000; } 
#nav-one li:hover a, #nav-one li.sfHover a { background: #fff; color: #000; } 
#nav-one li:hover ul a, #nav-one li.sfHover ul a { background: #565656; color: #959595; } 
#nav-one li:hover ul a:hover, #nav-one li.sfHover ul a:hover { background: #ccc; color: #000; } 
.nav ul { background: #565656; /*background: url(images/navbg.jpg) repeat-x 0 0 #292929;*/ list-style: none; margin: 0; width: 150px; position: absolute; top: -999em; left: -1px; } 
.nav li:hover ul, .nav li.sfHover ul { top: 37px; } 
.nav ul li { border: 0; float: none; } 
.nav ul a { border: 1px solid #cccccc; border-bottom: 0; padding-right: 20px; width: 150px; white-space: nowrap; } 
.nav ul a:hover { background: #ccc; color: #000; } 

下拉菜單顯示正常,但是當我將鼠標懸停在下拉列表中的項目,它自敗。

菜單是一個看起來像這樣:

<div id="topNav"> 
     <ul class="nav"> 

我已經試圖把它變成一個包裝無濟於事。

+3

你介意用這段代碼設置一個JSFiddle嗎?如果你這樣做,我們將更容易排除故障。 – Ennui

回答

1

超過您的子菜單可能是主菜單以外的1或2個像素。這將導致子菜單在鼠標到達之前「關閉」。

+0

謝謝傑夫!我改變了主菜單下的子菜單的頂部,它的工作方式就像它應該做的一樣! 祝你有美好的一天,再次感謝;) – user2516847