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

Question

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>

我想让我的悬停效果背景看起来和图片一样

我尝试编辑我的代码，但它只是突出了文本区域而不是整个 header 的高度。贴出来的图也是我打码的，但是找不到错误。

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> 标签有一个默认边距，您可以在 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;.

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

Answer 3

这是你的作品fiddle:

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;

}

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

What should i change in my code so that when i point on the menu , the hover just covers all the nav bar

html

css

header

nav