how to fix hover in navbar only highlighting the top half of element
Question
My website has a lot of flaws I know like with the background image and all but the most annoying one is how my hover animation only highlights the top half of my navbar elements. I would like for the hover to cover the entire div instead of just the top half of the element. Im pretty sure the problem arises from how I center my elements i'm not proficient at all with that. Any help much appreciated. Thanks.
HTML:
<!DOCTYPE html>
<html lang="en">
<html>
<head>
<link rel = "stylesheet" type = "text/css" href = "styles.css"/>
<title>Newberry College</title>
</head>
<body>
<div class = "header">
<div class = "logo">
<h1><a href = "#">Newberry College</a></h1>
</div>
<ul>
<li><a = href = "#">About</a></li>
<li><a = href = "#">School</a></li>
<li><a = href = "#">Student</a></li>
<li><a = href = "#">Resources</a></li>
</ul>
</div>
<div id="background-img"></div>
</body>
</html>
CSS:
/*Removes default page formatting*/
*{
margin: 0;
padding: 0;
list-style: none;
text-decoration: none;
font-family: 'Raleway', 'Arial', 'serif'
}
#background-img {
background: url(school.jpg);
background-repeat: no-repeat;
height: 100vh;
}
/*Formats logo*/
.logo{
width: 320px;
background-color: #D50074;
float: left;
height: 100%;
}
.logo h1{
font-size: 26px;
text-transform: uppercase;
padding: 35px 10px 0 10px;
}
.logo a{
color: #3609BB;
}
/*Formats the header div*/
.header {
width: 100%;
height: 100px;
display: block;
background-color: #9c01A7;
}
/*Styles list*/
.header ul li{
list-style: none;
}
/*Styles list elements*/
.header ul li a{
padding: 40px 20px 0 0;
float: right;
font-size: 20px;
text-transform: uppercase;
font-weight: 600;
}
/*Styles link hover*/
.header ul li a:hover{
background: #3609BB;
}
1 answers
solution1
1 ACCPTED 2021-05-28 09:29:41
Remove the two 0 s from:
/*Styles list elements*/
.header ul li a{
padding: 40px 20px 0 0; /* <--- here */
This is the same as padding: 40px 20px 40px 20px , which would also work.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.