html - 如何使悬停背景与菜单高度相同？

Question

如何使悬停背景与菜单高度相同？我还不能做对。

<div id="menu">
        <ul>
            <li> <a href="">Home</a></li>
            <li> <a href="">About us</a></li>
            <li> <a href="">Benefits</a></li>        
            <li> <a href="">How it Works</a></li>
            <li> <a href="sex">Contact us</a></li>
            <li> <a href="">Get Started</a></li>

        </ul>
    </div>

CSS 从这里开始

#menu {
    text-decoration: none;
    display: list-item;
    background-color: cadetblue;
    height: 60px;
}

#menu ul {
    list-style-type: none;
    margin: 0;
}

#menu ul li {
    float: left;
    height: auto;
    padding-left: 100px;
    font-family: sans-serif;
    font-size: 60x;
}

#menu ul li a {
    text-decoration: none;
    color: white;
}

#menu ul li a:hover {
    background-color: darkcyan;
    height: 60px;
}

我在这里缺少位置标签吗？

Answer 1

你已经为 anchor 标签提供了悬停。那么它只会影响 anchor 标签。如果你想要完全，你只需将鼠标悬停到 li 标签

  <style type="text/css">
 #menu {
    text-decoration: none;
    display: list-item;
    background-color: cadetblue;
    height: 60px;
}

#menu ul {
    list-style-type: none;
    margin: 0;
}

#menu ul li {
    display: inline-block;
    padding:1%;
    height: 60px;
    padding-left: 100px;
    font-family: sans-serif;
    font-size: 60x;
}

#menu ul li a {
    text-decoration: none;
    color: white;
}

#menu ul li:hover {
    background-color: darkcyan;

}