0

我的 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;
}

提前感谢您的帮助，祝您有美好的一天，

安塞尔姆

4

3 回答 3

0

您可以向菜单超链接添加一个类，为它们提供一个 margin-bottom:3px ，它应该会增加容器中的链接。

于 2013-03-04T18:06:01.560 回答
0

用于width:100%您的所有<li>或li a元素，并为您的<ul>. 这将解决您的问题。

于 2013-03-04T15:51:15.813 回答
0

使用该 CSS，您的嵌套 ul 将永久隐藏。你需要类似的东西

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

显示嵌套的菜单项，然后可能显示：inline on #MenuDeroulant li ul li a

于 2013-03-04T16:09:16.410 回答