html - 导航栏 - LI :HOVER Full Height

Question

所以我想要一个导航栏，当我将鼠标悬停在 li/a 元素上时，我会为导航栏的 FULL 高度获得不同的颜色。因为当我将鼠标悬停在它上面时，只有文本的背景颜色发生变化......这非常难看......

我希望这已经够清楚了，但是系统阻止我上传图片 :o。

谢谢!

编辑: 我忘记了 HTML 和 CSS:

    <ul id="nav">
            <li><a href="">Home</a></li>
            <li><a href="">Courses</a></li>
            <li><a href="">Subjects</a></li>
            <li><a href="">Sign Up</a></li>
            <li><a href="">Log In</a></li>
        </ul>

    #nav {
    height: 60px;
    font-size: 30px;
    line-height: 60px;
    vertical-align: middle;
    text-align: center;
    background-color: #0080FF;
    width: auto;
    border: 10px solid #16044E;
    border-radius: 20px;
    z-index: 1;
}

#nav ul {
}

#nav li {
    display: inline;
    text-align: center;
    margin-left: 10px;
    margin-right: 10px;
}

#nav li:hover {
    background-color: orange;
}

#nav a, a:active {
    color: white;
    text-decoration: none;
}

Answer 1

背景颜色仅应用于文本背景，因为您使用的是 display: inline;

给予内联元素的任何背景都将仅应用于其内容，这与应用于整个元素的 block 元素不同。

最简单的解决方案是将显示更改为 inline-block，如下所示:

#nav li
{
 display: inline-block;
}

JSBin