Tarique Tarique - 5 months ago 7
CSS Question

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



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>





i want to make my hover effect background look like the same in picture

i tried editing my code , but it just highlights the text area but not the height of full header. the image posted has also been coded by me , but unable to find the error.

Answer

A small change in ul and 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
}

Please find code snippet

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>