在 :hover full 中应用显示块

Question

我正在尝试制作一个菜单，在我的 nav li 元素中悬停时背景颜色会发生变化，但效果不佳，它没有覆盖边框的所有宽度，我尝试使用 left:0 但没有。

特别是第一个和最后一个 li 没有覆盖元素的所有宽度。

.nav{
 background-color:rgb(214, 19, 25);
 background:linear-gradient(rgb(215, 19, 25), rgb(163, 6, 11));
 background:-moz-linear-gradient(rgb(215, 19, 25), rgb(163, 6, 11));
 background:-o-linear-gradient(rgb(215, 19, 25), rgb(163, 6, 11));
 background:linear-gradient(rgb(215, 19, 25), rgb(163, 6, 11));
 border: 2px solid rgb(130, 0, 0);
 border-radius:10px;
 width:943px;
 float:left;
 margin:0 auto;
 padding:0;
 position:relative;
 z-index:1
}
.nav ul{
 margin:0;
 display:block;
}

.nav ul li{
 display:inline-block;
 padding:10px 30px;
 font-family:"Kratos True Type";
 font-size:24px;
 border-right:3px solid rgb(101,0,3);
 margin:0;
}
.nav ul li a{
 color:rgba(255, 255, 255, 1);

}
.nav ul .firstnav{
 padding-left:0;
}
.nav ul .lastnav{
 border-right:0;
}
.nav ul li a{
 text-decoration:none;
}
.nav ul li:hover{
 background:rgba(255, 186, 0, 1);
}

<nav class="nav">
  <ul>
   <li class="firstnav"><a href="">HOME</a></li>
  <li><a href="">DAFTAR</a></li>
  <li><a href="">PANDUAN</a></li>
  <li><a href="">DATA PRIBADI</a></li>
  <li class="lastnav"><a href="">DATA BUKU</a></li>
 </ul>
</nav>

Answer 1

黄色背景没有覆盖所有内容的原因是无序列表 (ul) 有一个未重置的 padding-left (read more about reseting with css here)

我稍微修改一下你的代码：

.nav {
  background-color: rgb(214, 19, 25);
  background: linear-gradient(rgb(215, 19, 25), rgb(163, 6, 11));
  background: -moz-linear-gradient(rgb(215, 19, 25), rgb(163, 6, 11));
  background: -o-linear-gradient(rgb(215, 19, 25), rgb(163, 6, 11));
  background: linear-gradient(rgb(215, 19, 25), rgb(163, 6, 11));
  border: 2px solid rgb(130, 0, 0);
  border-radius: 10px;
  float: left;
  margin: 0 auto;
width:880px;
  padding: 0;
  position: relative;
  z-index: 1
}

.nav ul {
  margin: 0;
  display: block;
  padding: 0;
}

.nav ul li {
  display: inline-block;
  padding: 10px 30px;
  font-family: "Kratos True Type";
  font-size: 24px;
  border-right: 3px solid rgb(101, 0, 3);
  margin: 0;
}

.nav ul li a {
  color: rgba(255, 255, 255, 1);
}

.nav ul .firstnav {
  padding-left: 0;
}

.nav ul .lastnav {
  border-right: 0;
}

.nav ul li a {
  text-decoration: none;
}

.nav ul li:hover {
  background: rgba(255, 186, 0, 1);
}

<nav class="nav">
  <ul>
    <li class="firstnav"><a href="">HOME</a></li>
    <li><a href="">DAFTAR</a></li>
    <li><a href="">PANDUAN</a></li>
    <li><a href="">DATA PRIBADI</a></li>
    <li class="lastnav"><a href="">DATA BUKU</a></li>
  </ul>
</nav>

Answer 2

试试这个。我刚刚对您的代码进行了一些更改。

.nav{
 background-color:rgb(214, 19, 25);
 background:linear-gradient(rgb(215, 19, 25), rgb(163, 6, 11));
 background:-moz-linear-gradient(rgb(215, 19, 25), rgb(163, 6, 11));
 background:-o-linear-gradient(rgb(215, 19, 25), rgb(163, 6, 11));
 background:linear-gradient(rgb(215, 19, 25), rgb(163, 6, 11));
 border: 2px solid rgb(130, 0, 0);
 border-radius:10px;
 width:auto;
 float:left;
 margin:0 auto;
 padding:0;
 position:relative;
 z-index:1
}
.nav ul{
 margin:0;
  padding: 0;
 display:block;
}

.nav ul li{
 display:inline-block;
 padding: 0;
 font-family:"Kratos True Type";
 font-size:24px;
 border-right:3px solid rgb(101,0,3);
 margin:0;
  float: left;
}
.nav ul li a{
 color:rgba(255, 255, 255, 1);
  padding: 10px 20px;
  display: block;

}
.nav ul .firstnav{
 padding-left:0;
}
.nav ul .lastnav{
 border-right:0;
}
.nav ul li a{
 text-decoration:none;
}
.nav ul li:hover{
 background:rgba(255, 186, 0, 1);
}

.nav ul .firstnav{
 border-radius: 10px 0 0 10px;
}
.nav ul .lastnav{
 border-radius: 0 10px 10px 0;
}

<nav class="nav">
  <ul>
   <li class="firstnav"><a href="">HOME</a></li>
  <li><a href="">DAFTAR</a></li>
  <li><a href="">PANDUAN</a></li>
  <li><a href="">DATA PRIBADI</a></li>
  <li class="lastnav"><a href="">DATA BUKU</a></li>
 </ul>
</nav>

Answer 3

我建议使用 flexbox（注意我减少了 5px 你的 nav width 并且在 padding 到 nav ul li 上增加了一点以完全适应悬停背景):

.nav {
  background-color: rgb(214, 19, 25);
  background: linear-gradient(rgb(215, 19, 25), rgb(163, 6, 11));
  background: -moz-linear-gradient(rgb(215, 19, 25), rgb(163, 6, 11));
  background: -o-linear-gradient(rgb(215, 19, 25), rgb(163, 6, 11));
  background: linear-gradient(rgb(215, 19, 25), rgb(163, 6, 11));
  border: 2px solid rgb(130, 0, 0);
  border-radius: 10px;
  width: 938px;
  /*float: left;*/
  display: flex;
  margin: 0 auto;
  padding: 0;
  position: relative;
  z-index: 1
}

.nav ul {
  margin: 0;
  padding: 0;
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
}

.nav ul li {
  display: flex;
  padding: 10px 36px;
  /*font-family:"Kratos True Type";*/
  font-size: 24px;
  border-right: 3px solid rgb(101, 0, 3);
  margin: 0;
}

.nav ul li a {
  color: rgba(255, 255, 255, 1);
}

.nav ul .firstnav {
  padding-left: 30px;
  border-top-left-radius: 6px;
  border-bottom-left-radius: 6px;
  margin: 0;
}

.nav ul .lastnav {
  border-right: 0;
  padding-right: 30px;
  border-top-right-radius: 6px;
  border-bottom-right-radius: 6px;
  margin: 0;
}

.nav ul li a {
  text-decoration: none;
}

.nav ul li:hover {
  background: rgba(255, 186, 0, 1);
  margin: 0;
}

<nav class="nav">
  <ul>
    <li class="firstnav"><a href="">HOME</a></li>
    <li><a href="">DAFTAR</a></li>
    <li><a href="">PANDUAN</a></li>
    <li><a href="">DATA PRIBADI</a></li>
    <li class="lastnav"><a href="">DATA BUKU</a></li>
  </ul>
</nav>

在 :hover full 中应用显示块

Apply display block in :hover full

html

css

nav