Question

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

.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

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

.nav_bar li {
    padding: 0;
}

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

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

Answer 2

问题是li元素中的填充。锚位于填充内部，因此只有有限的宽度。我的建议是你从li元素中取出填充并将其添加到一个可以放在锚标记内的范围内。像这样：

  <li><a href="index.html"><span>Home</span></a></li>

像这样更新css：

 .nav_bar li span{
   padding:5px 7% 5px 7%;
   display:block;
}

.nav_bar li { 填充：0像素; 余量：0像素;

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

  display:inline-block;

  font-size:20pt;
  color:white;
}

链接不会继承list元素的宽度

2 个答案: