I have a navbar on a website, of which I want the background color to be yellow and text black. And when having a mouse over an item, the background would be black and the text yellow.
My problem is that the text is returning to black when moving the mouse outside of the text, but still within the boxed “li”-item, resulting in black background and black text. This causes problems for example where hovered dropdown title (“MORE”) turns to black, and the background also remains in black when moving the mouse onto the listed items (see picture).
I know it’s because of “a = black” and “a:hover = yellow”, so when the mouse is off the text (“a”), it returns to black, but I can’t get my head around on how to have the “a” remain yellow inside the hovered “li” item, even though the mouse is not on top of the text.
Note: I’m also using Spynav and StickNav on the website, which is the reason for the structure of my code. I just left them out to be more clear to read
Code:
<nav class="navbar">
<ul class="nav">
<li><a href="#">HOME</a></li>
<li><a href="#">CONTACT</a></li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown">MORE</a>
<ul class="dropdown-content">
<li><a href="discography">DISCOGRAPHY</a></li>
<li><a href="gallery">GALLERY</a></li>
<li><a href="videos">VIDEOS</a></li>
</ul>
</li>
</ul>
</nav>
.nav {
background-color: yellow;
}
.nav a{
color: black;
}
.nav a:hover{
color:yellow;
}
.nav li:hover{
background-color: black;
}
/* DROPDOWN MENU */
.dropdown-content {
background-color: yellow;
display: none;
position: absolute;
min-width: auto;
}
.dropdown:hover .dropdown-content {
display: block;
}
I have tried having the text color of hovered li-item to be yellow, and background black, as I’d love to think it would work like this.
.nav li:hover{
color:yellow !important;
background-color: black;
}
pineapple is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
1
Change the selector .nav a:hover into .nav li:hover > a
Then each hovered menu item becomes yellow-on-black, and the items in the sub-menu stay black-on-yellow, until they themselves also get hovered. (That’s how you want it, right?)
.nav {
background-color: yellow;
}
.nav a{
color: black;
}
.nav li:hover > a{
color:yellow;
}
.nav li:hover{
background-color: black;
}
/* DROPDOWN MENU */
.dropdown-content {
background-color: yellow;
display: none;
position: absolute;
min-width: auto;
}
.dropdown:hover .dropdown-content {
display: block;
}<nav class="navbar">
<ul class="nav">
<li><a href="#">HOME</a></li>
<li><a href="#">CONTACT</a></li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown">MORE</a>
<ul class="dropdown-content">
<li><a href="discography">DISCOGRAPHY</a></li>
<li><a href="gallery">GALLERY</a></li>
<li><a href="videos">VIDEOS</a></li>
</ul>
</li>
</ul>
</nav>
body {
background: #6e28d9;
padding: 0 24px;
margin: 0;
height: 100vh;
color: white;
display: flex;
justify-content: center;
align-items: center;
}
.nav {
background-color: yellow;
padding: 0;
margin: 0;
list-style: none;
}
.nav li {
display: inline-block;
}
.nav a {
display: block;
padding: 10px 20px;
color: black;
text-decoration: none;
}
.nav a:hover,
.nav li:hover > a {
color: yellow;
background-color: black;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: yellow;
min-width: 160px;
padding: 0;
margin: 0;
list-style: none;
z-index: 1;
}
.dropdown-content a {
color: black; /* Text color of the dropdown items */
padding: 10px 20px;
display: block;
text-decoration: none;
}
.dropdown-content a:hover {
color: yellow; /* Text color when hovered */
background-color: black;
}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown:hover .dropdown-content {
background-color: yellow;
}
html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="stylesheet" href="src/style.css">
</head>
<body>
<nav class="navbar">
<ul class="nav">
<li><a href="#">HOME</a></li>
<li><a href="#">CONTACT</a></li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown">MORE</a>
<ul class="dropdown-content">
<li><a href="discography">DISCOGRAPHY</a></li>
<li><a href="gallery">GALLERY</a></li>
<li><a href="videos">VIDEOS</a></li>
</ul>
</li>
</ul>
</nav>
</body>
</html>
This is the fixed CSS. This works for me