html - 悬停背景颜色未完全显示在链接上

Question

我已经在 JsFiddle 上发布了我的代码.问题是如果我将鼠标悬停在背景颜色未完全显示的链接上。背景颜色仅出现在文本中。我希望背景颜色应该根据链接的特定宽度和高度显示。

HTML:

<div id="menu">
    <ul class="menubar">
        <li><a href="#">link</a></li>
        <li><a href="#">link1</a></li>
        <li><a href="#">link2</a>
            <ul class="sidemenu">
                <li><a href="#">sub1</a></li>
                <li><a href="#">sub2</a></li>
                <li><a href="#">sub3</a></li>
            </ul>
        </li>
        <li><a href="#">link3</a></li>
        <li><a href="#">link4</a></li>
    </ul>
</div>

CSS:

body
{
    background: rgba(120,120,120,0.1);
    padding: 0;
    margin: 0;
}
#logo
{
    height: 50px;
}
#menu
{
    background-color: #CC0000;
    height: 40px;
}
.menubar
{
    list-style-type: none;
    text-align: center;
    width: auto;
    position: relative;
}
.menubar li
{
    display: inline-block;
    padding: 10px 20px 5px 20px;
}
.menubar li a
{
    text-decoration: none;
    font-family: Geneva, Arial, Helvetica, sans-serif;
    color: #FFFFFF;
}
.menubar li a:hover
{
    background-color: rgba(255,255,255,0.3);
}
.sidemenu
{
    display: none;
}
.menubar li:hover .sidemenu
{
    display: block;
}
.sidemenu
{
    background-color: #CC0000;
    position: absolute;
    height: 40px;
    width: 70px;
    height: 100px;
}

.sidemenu li a:hover
{
    background-color: rgba(255,255,255,0.3);
}

Answer 1

如果在 <li> 上应用效果，悬停效果会起作用，但下拉菜单不会显示，直到您的鼠标完全放在链接本身上。这可能会让用户感到困惑，因为效果和结果不同。

我建议您改为对链接应用填充，这样链接区域就更大了。它解决了视觉问题并改善了体验。

.menubar li {
    display: inline-block;
}
.menubar li a {
    display: inline-block;
    padding: 10px 20px;
    text-decoration: none;
    font-family: Geneva, Arial, Helvetica, sans-serif;
    color: #FFFFFF;
}

这是 a complete Fiddle对您的下拉菜单进行了一些额外的修复。