Question

我很难让背景颜色在悬停时转到导航栏的顶部。截至目前，它只突出了一些文本。我有什么简单的东西吗？我在下面放了一个jsfiddle来帮助显示它。

HTML

<nav>
   <ul>
      <li><h1><a id="nav_logo" href="/index.php">This is a Test</a></h1></li>
      <li><a class="nav_link" href="/index.php">Home</a></li>
      <li><a class="nav_link" href="/pages/about.php">About</a></li>
      <li><a class="nav_link" href="#">1</a></li>
      <li><a class="nav_link" href="#">2</a></li>
      <li><a class="nav_link" href="#">3</a></li>
      <li><a class="nav_link" href="#">4</a></li>
      <li><a class="nav_link" href="#">5</a></li>         
   </ul>
</nav>

CSS

nav ul{
   list-style: none; 
   background-color: #333;  
   padding: 0.8125rem;
}

nav li{
   display: inline-block;
}

nav a{
   text-decoration: none; 
   color: white;  


}

#nav_logo{
   color:#FEBC11;
   background-color: #333;  
}

.nav_link{
   padding-left: 2rem;
}

nav li a:hover{
   background-color: black;
}

https://jsfiddle.net/mhLjav1a/3/

Answer 1

nav ul{
    list-style: none; 
    background-color: #333;  
    padding: 0 25px;
    margin: 0;
}

nav li{
    display: inline-block;
    padding: 20px 0;
}

.logo {
    padding: 0;
}

nav li:hover{
    background-color: black;
}

nav ul li h1 {
    margin: 0;
}

nav a{
    text-decoration: none; 
    color: white;  
}

#nav_logo{
    color:#FEBC11;
    background-color: #333;  
}

.nav_link{
    margin: auto 10px;
}

<nav>
    <ul>
        <li class="logo"><h1><a id="nav_logo" href="/index.php">This is a Test</a></h1></li>
        <li><a class="nav_link" href="/index.php">Home</a></li>
        <li><a class="nav_link" href="/pages/about.php">About</a></li>
        <li><a class="nav_link" href="#">1</a></li>
        <li><a class="nav_link" href="#">2</a></li>
        <li><a class="nav_link" href="#">3</a></li>
        <li><a class="nav_link" href="#">4</a></li>
        <li><a class="nav_link" href="pages/contact.php">5</a></li>         
    </ul>
</nav>

Answer 2

以下是解决方案：https://jsfiddle.net/mhLjav1a/5/

问题是关于填充。

.nav_link{
   padding-left: 2rem;
}

应该是，

.nav_link{
   margin-left: 2rem;
}

Answer 3

据我了解，您希望<li>的高度与导航的大小相匹配。如果这是您要存档的内容，则只需更改以下内容：

nav li{
   display: inline-block;
}

到

nav li{
   display: table-cell;
   text-align: center;
}

并且您应该在<li>的两侧添加填充以使悬停效果看起来更好。

.nav_link{
  padding: 1rem; // this was padding-left: 2rem; before
}

https://jsfiddle.net/mhLjav1a/10/

Answer 4

之所以发生这种情况是因为您将padding-left提供给.nav_link，背景将填充区域作为元素的一部分。你可以通过多种方式改变它：

1-您可以将padding-left更改为margin-left

2-您可以使用background-clip:content-box，background忽略padding

background-clip: content-box;

https://jsfiddle.net/mhLjav1a/6/

悬停未填充导航栏高度的问题

4 个答案: