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垂直菜单：悬停模式下的背景颜色问题

回答

相关问题