Question

＆＃13;

body {
	background: gray;
	height:100%;
	width:100%;
	margin:0;
}

header {
	background:black;
	height:auto;
	width:100%;
	float:left;
}

header nav {
	width:100%;
	height:auto;
}
header nav ul{
	list-style:none;
	height:auto;
	width:40%;
	float:right;
}

header nav ul li:hover{
	background-color:lime;
	border-radius:5px;
}


header nav ul li{
	color:white;
	float:left;
	margin-left:5%;
	padding:10px 15px;
	
}

＆＃13;

<!DOCTYPE html>
<html>
<head>
<title></title>
<link href="header.css" type="text/css" rel="stylesheet">
</head>
<body>
	<header>
		<nav>
			<ul>
				<li>Home</li>
				<li>Portfolio</li>
				<li>Blog</li>
				<li>Contact Us</li>
			</ul>
		</nav>
	</header>
	
</body>
</html>

＆＃13;

我想让我的悬停效果背景看起来像图片中的相同

Screenshot

我尝试编辑我的代码，但它只是突出显示文本区域而不是完整标题的高度。发布的图像也由我编码，但无法找到错误。

Answer 1

ul和li的微小变化

header nav ul {
    list-style: none;
    height: auto;
    width: 40%;
    float: right;
    margin: 0; // added
}

header nav ul li {
    color: white;
    float: left;
    margin-left: 5%;
    padding: 16px 15px; //added
}

请查找代码段

body {
  background: gray;
  height:100%;
  width:100%;
  margin:0;
}

header {
  background:black;
  height:auto;
  width:100%;
  float:left;
}

header nav {
  width:100%;
  height:auto;
}
header nav ul{
  list-style:none;
  height:auto;
  width:40%;
  float:right;
  margin: 0;
}

header nav ul li:hover{
  background-color:lime;
  border-radius:5px;
}


header nav ul li{
  color:white;
  float:left;
  margin-left:5%;
  padding:26px 15px;
  
}

<!DOCTYPE html>
<html>
<head>
<title></title>
<link type="text/css" rel="stylesheet" href="sample.css">
</head>
<body>
	<header>
		<nav>
			<ul>
				<li>Home</li>
				<li>Portfolio</li>
				<li>Blog</li>
				<li>Contact Us</li>
			</ul>
		</nav>
	</header>
	
</body>
</html>

Answer 2

<ul>标记有默认边距，您可以使用margin: 0在CSS中覆盖它。这将使li:hover成为<ul>的完整高度。

header nav ul{
    list-style:none;
    height:auto;
    width:70%;
    float:right;
  margin: 0;
}

默认边距为16像素，如果您想保留外观，请将其添加到<li>填充：padding:26px 15px;。

https://jsfiddle.net/pjpwea/cn12hjwt/1/

Answer 3

这是你的工作小提琴：

https://jsfiddle.net/sesn/jnpvxu9r/1/

header nav ul{
  margin: 0px; margin-left: 20px; padding: 0px;
    list-style:none;
    height:auto;
}

header nav ul li:hover{
    background-color:lime;
}


header nav ul li{
    color:white;
    float:left;
    padding:10px 15px;
  border-radius: 0px;

}

我应该在代码中更改什么，以便当我指向菜单时，悬停只覆盖所有导航栏

3 个答案: