Css垂直菜单: issue with background color on hover mode

Question

我的 CSS 垂直菜单存在设计问题。

它可以工作，但是当我将鼠标悬停在某个类别上时，它没有我想要的效果

在下方，您将看到一个简单的垂直菜单，当您将鼠标悬停在主要类别上时会出现该菜单

但是我想有一个小的影响:当鼠标悬停在一个类别上时，我想添加一个背景颜色(黑色)。

它工作正常，但我希望背景的高度和宽度与文本的高度和宽度完全一致。目前，我不知道为什么；背景的高度超过了我文字的高度。这是一些照片，展示了它现在的样子以及我希望成为的样子。

现在怎么样了:

我希望它是这样的:

这是我的代码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;
} 

在此先感谢您的帮助，祝您度过愉快的一天，

安塞尔姆

Answer 1

使用 width:100%给你所有的<li>或 li a元素和固定宽度到您的 <ul> .这将解决您的问题。