html - 链接不会继承列表元素的宽度

Question

我无法获取导航栏中的链接来拉伸(stretch)每个列表元素的整个宽度。因此，当用户将鼠标放在导航栏列表元素(而不是其中的链接文本)上时，单击不会将他们带到所需的页面。

.nav_bar
{
    width:100%
}
.nav_bar ul
{
    padding:5px;
    width:100%;

    background-color:#50AF36; 
}
.nav_bar li
{
    padding:5px 7% 5px 7%;
    margin:0px;

    position:relative; /*acts as container for drop-down*/

    display:inline-block;

    font-size:20pt;
    color:white;
}
.nav_bar li:hover
{
    background-color:#47d620;
}
.nav_bar a
{
    display:block;

    width:inherit;

    text-decoration:none;
    color:inherit;
}
/*----------Hideable Dropdown Menu----------*/
.nav_bar ul li ul
{
    position:absolute;  /*create drop-down just below nave list item*/
    left:0px;

    padding:0px;
    margin-top:5px;

    display:none;
}
.nav_bar ul li:hover ul
{
    display:block;
}
.nav_bar ul li ul li
{
    padding:0 10px;
    margin:0;

    display:block;
}

<div class="nav_bar">
    <ul>
        <li><a href="index.html">Home</a></li>
        <li><a href="About.html">About</a></li>
        <li><a href="Products.html">Products</a></li>
    </ul>
</div>

Answer 1

您应该从 li 中删除 padding 并将其添加到 a 标记中。对背景的 hover 样式执行相同的操作。

.nav_bar li {
    padding: 0;
}

.nav_bar li a {
    padding: 5px 30px;
}

.nav_bar li a:hover {
    background-color:#47d620;
}