As I delve into the realm of web development, my initial project involves creating a portfolio site. However, I am facing difficulties with the dropdown section in one of the menus. I incorporated a :hover pseudo-class to the dropdownhover div to signal when to display the dropdown menu. Unfortunately, the dropdownnav class does not seem to change on line 67 as expected. I attempted altering the pseudo-class to only affect itself, which worked fine. However, when trying to modify a sibling class, it failed. Could this be due to a mistake with my combinators?
@import url('https://fonts.googleapis.com/css2?family=Source+Code+Pro:ital@1&display=swap');
* {
margin: 0;
z-index: 0;
}
body {
background-color: #EF2F88;
}
.navbar {
background-color: #8843F2;
margin: 0
}
.navlist {
margin-right: 0;
margin-left: 40%;
height: 7rem;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
list-style: none;
}
.navlist li {
height: 100%;
text-align: center;
flex: 1;
position: relative;
}
.navlist li a {
text-decoration: none;
color: white;
font-family: Source Code Pro;
font-size: 2.5rem;
top: 2rem;
position: relative;
}
.dropdownnav {
background-color: #8843F2;
margin-top: 3rem;
height: 8rem;
opacity: 0;
}
.dropdownlist {
justify-content: space-between;
display: flex;
gap: 1rem;
flex-direction: column;
list-style: none;
}
.dropdownlist li {
text-align: left;
}
.dropdownlist li a {
font-size: 1.5rem;
}
.dropdownhover:hover + .dropdownnav {
opacity: 1;
}
.dropdownhover {
position: absolute;
top: 0;
height: 15rem;
width: 100%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="styles.css"></link>
<title>Portfolio</title>
</head>
<body>
<!--NAV BAR SECTION-->
<nav class="navbar">
<ul class="navlist">
<li id="about">
<a href="index.html">About Me</a>
</li">
<li id="projects">
<a href="index.html">Projects</a>
<nav class="dropdownnav">
<ul class="dropdownlist">
<li class="mania">
<a href="">Clicking Mania</a>
</li>
<li class="bloopville">
<a href="">Bloopville</a>
</li>
</ul>
</nav>
<div class="dropdownhover"></div>
</li">
<li id="skills">
<a href="index.html">Skills</a>
</li">
<li id="contact">
<a href="index.html">Contact</a>
</li">
</ul>
</nav>
</body>
</html>