Css垂直菜單：懸停模式下的背景顏色問題

它的工作，但它並沒有我想有當我做了鼠標懸停在某個類別

下面的效果，你會看到出現一個簡單的垂直菜單，當你將鼠標懸停在主類別

但是我想有一個小的影響：當鼠標懸停的類別，我想添加背景顏色（黑色）。

它的工作，但我希望背景的高度和寬度粘貼到文本相同的高度和寬度。目前，我不知道爲什麼;背景的高度超過了我的文字的高度。下面是一些關於它是如何現在，以及我想成爲怎樣的圖片。

它是如何的現在： How it i snow

如何，我想它是： How I would like it to be

這裏是我的代碼的HTML代碼

<div id="menu"> 
        <ul id="MenuDeroulant"> 
         <li style="margin-left:-10px;"><a href="#" style="">Main categorie</a> 
          <ul>    
           <li><a href="" >Subcat 1</a></li> 
           <li><a href="" >Subcat 2</a></li> 

          </ul> 
         </li> 
        </ul>

這裏是我的css代碼：

#MenuDeroulant 
{ 
    margin: 0; 
    padding: 0 
} 
#MenuDeroulant li 
{  
    float: left; 
    list-style: none; 
} 
#MenuDeroulant li a 
{  
    display: block; 
    padding: 0px 0px; 
    text-decoration: none; 
    color: #000; 
    white-space: nowrap; 
    text-align:center; 
} 

#MenuDeroulant li a:hover 
{  
    background: #000; 
    color: #FFF; 
} 

#MenuDeroulant li ul 
{ visibility: hidden; 
    padding: 0px 0px; 
} 

#MenuDeroulant li ul li 
{  
    float: none; 
    display: inline; 
} 

#MenuDeroulant li ul li a 
{  
width: auto; 
padding: 0px 0px; 
} 

#MenuDeroulant li ul li a:hover 
{  
background: #0000; 
padding: 0px 0px; 
}

預先感謝您的幫助，我希望您有一個非常愉快的一天，

安塞爾姆

來源

2013-03-04 Anselme

使用width:100%到所有<li>或li a元素和固定寬度的<ul>。這將解決您的問題。

來源

2013-03-04 15:51:15 otinanai

使用該CSS，您的嵌套ul會永久隱藏。你需要像

#MenuDeroulant li:hover ul { 
visibility:visible; 
}

顯示嵌套的菜單項，然後可能顯示：在#MenuDeroulant李UL裏內嵌一個

來源

2013-03-04 16:09:16 Dale

您可以將類添加到您的菜單鏈接給他們一個與容限底部：3px，它應該碰撞容器中的鏈接。

來源

2013-03-04 18:06:01

Css垂直菜單：懸停模式下的背景顏色問題

回答

相關問題