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

如何使悬停背景与菜单相同的高度？我现在还不能理解。

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

我在这里错过位置标记吗？

最佳答案

您已经将Hover For ancho r标签给定了，那么它只会在锚标签中起作用。

  <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;

}

关于html - 如何使悬停背景与菜单相同的高度？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/36888465/