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;
}<!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>我想让我的悬停效果背景看起来和图片一样
我尝试编辑我的代码，但它只是突出了文本区域而不是完整标题的高度。贴出来的图也是我打码的，但是找不到错误。
最佳答案
<ul>标记有默认边距，您可以在 CSS 中用 margin: 0 覆盖它.这将使 li:hover <ul> 的全高.
header nav ul{
list-style:none;
height:auto;
width:70%;
float:right;
margin: 0;
}
默认边距是 16px，如果你想保留外观，将它添加到 <li>填充:padding:26px 15px; .
关于html - 我应该在我的代码中更改什么，以便当我指向菜单时，悬停正好覆盖所有导航栏，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37854509/