CSS樣式問題

Question

我一直下拉菜單下面的教程參考，到目前爲止，我已成功地做到以下幾點：

http://jsfiddle.net/rusticblonde/NZVRq/2/

但是在hoverover子菜單似乎在有一個巨大的差距懸停在顏色上。我是否改變了UL UL LI？

這是到目前爲止的代碼：

#cssmenu ul { margin: 0; padding: 0;} 
#cssmenu li { margin: 0; padding: 0;} 
#cssmenu a { margin: 0; padding: 0;} 
#cssmenu ul {list-style: none;} 
#cssmenu ul ul {padding: 0;} 
#cssmenu a {text-decoration: none;} 
#cssmenu {height: 70px; background-color: rgb(35,35,35); box-shadow: 0px 2px 3px rgba(0,0,0,.4);} 


#cssmenu ul li { 
float: left; 
margin-left: 15px; 
position: relative; 
} 

#cssmenu ul li a { 
color: rgb(160,160,160); 
font-family: Verdana, 'Lucida Grande'; 
font-size: 15px; 
line-height: 70px; 
padding: 15px 20px; 
-webkit-transition: color .15s; 
-moz-transition: color .15s; 
-o-transition: color .15s; 
    transition: color .15s; 
} 

#cssmenu ul li a:hover {color: rgb(250,250,250); } 


#cssmenu ul li ul { 
opacity: 0; 
visibility: hidden; 
background-color: rgb(250,250,250); 
text-align: left; 
position: absolute; 
top: 55px; 
left: 50%; 
margin-left: -90px; 
width: 180px; 
-webkit-transition: all .3s .1s; 
-moz-transition: all .3s .1s; 
-o-transition: all .3s .1s; 
    transition: all .3s .1s; 
-webkit-border-radius: 5px; 
-moz-border-radius: 5px; 
    border-radius: 5px; 
-webkit-box-shadow: 0px 1px 3px rgba(0,0,0,.4); 
-moz-box-shadow: 0px 1px 3px rgba(0,0,0,.4); 
    box-shadow: 0px 1px 3px rgba(0,0,0,.4); 
} 

#cssmenu ul li:hover > ul { 
opacity: 1; 
top: 65px; 
visibility: visible; 
} 
#cssmenu ul li > ul:before{ 
content: ''; 
display: block; 
border-color: transparent transparent rgb(250,250,250) transparent; 
border-style: solid; 
border-width: 10px; 
position: absolute; 
top: -20px; 
left: 50%; 
margin-left: -10px; 
} 
#cssmenu ul ul li { position: relative;} 
#cssmenu ul ul a{ 
color: rgb(50,50,50); 
font-family: Verdana, 'Lucida Grande'; 
font-size: 13px; 
background-color: rgb(250,250,250); 
display: block; 
-webkit-transition: background-color .1s; 
-moz-transition: background-color .1s; 
-o-transition: background-color .1s; 
    transition: background-color .1s; 
} 

#cssmenu ul ul a:hover {background-color: rgb(240,240,240);} 


#cssmenu ul ul ul { 
visibility: hidden; 
opacity: 0; 
position: absolute; 
top: -16px; 
left: 206px; 
background-color: rgb(250,250,250); 
text-align: left; 
-webkit-transition: all .3s; 
-moz-transition: all .3s; 
-o-transition: all .3s; 
    transition: all .3s; 
-webkit-border-radius: 5px; 
-moz-border-radius: 5px; 
    border-radius: 5px; 
-webkit-box-shadow: 0px 1px 3px rgba(0,0,0,.4); 
-moz-box-shadow: 0px 1px 3px rgba(0,0,0,.4); 
    box-shadow: 0px 1px 3px rgba(0,0,0,.4); 
} 


#cssmenu ul ul > li:hover > ul { opacity: 1; left: 196px; visibility: visible;} 


#cssmenu ul ul a:hover{ 
background-color: rgb(205,44,36); 
color: rgb(240,240,240); 
}​ 

感謝

Answer 1

如果我理解正確的話要刪除以上/紅色的差距波紋管在右側彈出的文本？

您可以通過在彈出窗口中輸入<a>標籤更小的line-height。目前的巨大差距來自於大line-height在規則#cssmenu ul li a {