Hello everyone, I'm new to stackoverflow and seeking some guidance.
I am currently working on my website and I would like the background color of the top navigation links to change when hovered over. Specifically, not just the text but the entire area from top to bottom in the navigation bar. This will help users easily identify which link they are hovering over and also enhance the overall look of the website. Can anyone provide me with instructions on how to achieve this?
.header {
top: 0;
position: sticky;
width: 100%;
background: #f0f0f0;
clear: both;
height: 80px;
align-content: center;
z-index: +2;
overflow: hidden;
}
.header a:hover {
background-color: #f2f2f2;
}
#logo {
position: sticky;
float:left;
margin:0;
width: 220px;
height: 60px;
margin-left: 20px;
margin-top: 10px; /* if you want it vertically middle of the navbar. */
}
#navlist {
float: right;
/* if you want it vertically middle of the navbar */
}
/* nav list style */
li {
display: inline;
list-style-type: square;
padding-right: 20px;
font-family: "Verdana", sans-serif;
font-size: 25px;
display: inline-block;
vertical-align: top;
line-height: 47.5px;
height: 80px;
}
/* link style */
a:link {
text-decoration: none;
color: black;
}
a:visited {
text-decoration: none;
color: black;
}
a:hover {
text-decoration: none;
color: #ffffff;
}
a:active {
text-decoration: none;
}<div class="header">
<a href="homepage.html"><img id="logo" href="homepage.html" src="https://i.imgur.com/PTxdlc0.png"></a>
<ul id="navlist">
<li id="active"><a href="alliance.html">ALLIANCE</a></li>
<li><a href="asp.html">ASP</a></li>
<li><a href="diamondback.html">DIAMONDBACK</a></li>
<li><a href="type.html">TYPE</a></li>
<li><a href="info.html">INFO</a></li>
</ul>
</div>