html - 在 :hover full 应用显示 block

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

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

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