In my navigation section I have sections for Home, Brass, Woodwind, Percussion, Additional Equipment, Maintenance. The Brass, Woodwind, and Percussion sections are supposed to dropdown to reveal pages that belong to those sections, but I'm having trouble making that happen. I've tried the following code to make it work, but it isn't working.
.wrapper .sidebar ul li ul {
display: none;
position: relative;
}
.wrapper .sidebar ul li:hover ul {
display: block;
}
*{
margin: 0;
padding: 0;
box-sizing: border-box;
list-style: none;
text-decoration: none;
font-family: Calibri, Helvetica, Arial, Sans-Serif;
}
body {
background-color: #348899;
}
.wrapper .sidebar {
position: fixed;
width: 160px;
height: 100%;
background-color: #979C9C;
color: #343642;
padding: 20px 0;
}
.wrapper .sidebar h2 {
text-align: center;
margin-bottom: 20px;
}
.wrapper .sidebar ul li {
padding: 15px;
}
.wrapper .sidebar ul li ul {
display: none;
position: relative;
left: auto;
right: 35%;
}
.wrapper .sidebar ul li:hover {
background-color: #B1B6B6;
}
.wrapper .sidebar ul li:hover a {
color: #fff;
}
.wrapper .sidebar ul li a .fas {
width: 20px;
}
.sidebar a {
text-decoration: none;
color: #343642;
}<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="project.css">
<meta charset="utf-8" />
<title>Beginning Band Players - Home</title>
<script src="https://kit.fontawesome.com/b698fbb6d0.js" crossorigin="anonymous"></script>
</head>
<body>
<div class="wrapper">
<div class="sidebar">
<h2>
Navigation
</h2>
<ul>
<li><a href="index.html"><i class="fas fa-home"></i>Home</a></li>
<li><a href="#"><i class="fas fa-angle-double-right"></i>Brass</a></li>
<ul>
<li><a href="trumpet.html">Trumpet</a></li>
<li><a href="frenchhorn.html">Horn</a></li>
<li><a href="trombone.html">Trombone</a></li>
<li><a href="euphonium.html">Euphonium</a></li>
<li><a href="tuba.html">Tuba</a></li>
</ul>
<li><a href="#"><i class="fas fa-angle-double-right"></i>Woodwind</a></li>
<li><a href="#"><i class="fas fa-angle-double-right"></i>Percussion</a></li>
<li><a href="#"><i class="fas fa-angle-double-right"></i>Additional Materials</a></li>
<li><a href="#"><i class="fas fa-toolbox"></i>Maintenance</a></li>
</ul>
</div>
</div>
</body>
</html>CodePudding user response：
did you try this? [I just suggest using a class or ID]
<!DOCTYPE html>
<html lang="en">
<head>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
list-style: none;
text-decoration: none;
font-family: Calibri, Helvetica, Arial, Sans-Serif;
}
body {
background-color: #348899;
}
.wrapper .sidebar {
position: fixed;
width: 160px;
height: 100%;
background-color: #979c9c;
color: #343642;
padding: 20px 0;
}
.wrapper .sidebar h2 {
text-align: center;
margin-bottom: 20px;
}
.wrapper .sidebar ul li {
padding: 15px;
}
.wrapper .sidebar ul li ul {
display: none;
position: relative;
left: auto;
right: 35%;
}
.wrapper .sidebar ul li:hover {
background-color: #b1b6b6;
}
.wrapper .sidebar ul li:hover a {
color: #fff;
}
.wrapper .sidebar ul li a .fas {
width: 20px;
}
.sidebar a {
text-decoration: none;
color: #343642;
}
.wrapper .sidebar ul ul {
display: none;
position: relative;
}
.wrapper .sidebar ul:hover ul {
display: block;
}
</style>
<meta charset="utf-8" />
<title>Beginning Band Players - Home</title>
<script src="https://kit.fontawesome.com/b698fbb6d0.js" crossorigin="anonymous"></script>
</head>
<body>
<div class="wrapper">
<div class="sidebar">
<h2>
Navigation
</h2>
<ul>
<li>
<a href="index.html"><i class="fas fa-home"></i>Home</a>
</li>
<li>
<a href="#"><i class="fas fa-angle-double-right"></i>Brass</a>
</li>
<ul>
<li><a href="trumpet.html">Trumpet</a></li>
<li><a href="frenchhorn.html">Horn</a></li>
<li><a href="trombone.html">Trombone</a></li>
<li><a href="euphonium.html">Euphonium</a></li>
<li><a href="tuba.html">Tuba</a></li>
</ul>
<li>
<a href="#"><i class="fas fa-angle-double-right"></i>Woodwind</a>
</li>
<li>
<a href="#"><i class="fas fa-angle-double-right"></i>Percussion</a>
</li>
<li>
<a href="#"><i class="fas fa-angle-double-right"></i>Additional Materials</a>
</li>
<li>
<a href="#"><i class="fas fa-toolbox"></i>Maintenance</a>
</li>
</ul>
</div>
</div>
</body>
</html>CodePudding user response：
The first problem was that your li for Brass was not properly closed. It did not wrap the child elements properly.
Then I made a little adjustment to the CSS and HTML. I added a class, .hidden-child, to the child li(s). This should make sure, your hover doesn't trigger the display of every child ul of all the menu items, to open when you hover over one menu item.
*{
margin: 0;
padding: 0;
box-sizing: border-box;
list-style: none;
text-decoration: none;
font-family: Calibri, Helvetica, Arial, Sans-Serif;
}
body {
background-color: #348899;
}
.wrapper .sidebar {
position: fixed;
width: 160px;
height: 100%;
background-color: #979C9C;
color: #343642;
padding: 20px 0;
}
.wrapper .sidebar h2 {
text-align: center;
margin-bottom: 20px;
}
.wrapper .sidebar ul li {
padding: 15px;
}
.wrapper > .sidebar > ul > li .hidden-child {
display: none;
}
.wrapper .sidebar ul li:hover .hidden-child {
/* background-color: #B1B6B6; */
display: block
}
.wrapper .sidebar ul li:hover a {
color: #fff;
}
.wrapper .sidebar ul li a .fas {
width: 20px;
}
.sidebar a {
text-decoration: none;
color: #343642;
}<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="project.css">
<meta charset="utf-8" />
<title>Beginning Band Players - Home</title>
<script src="https://kit.fontawesome.com/b698fbb6d0.js" crossorigin="anonymous"></script>
</head>
<body>
<div class="wrapper">
<div class="sidebar">
<h2>
Navigation
</h2>
<ul>
<li><a href="index.html"><i class="fas fa-home"></i>Home</a></li>
<li menuit><a href="#"><i class="fas fa-angle-double-right"></i>Brass</a>
<ul class="hidden-child">
<li><a href="trumpet.html">Trumpet</a></li>
<li><a href="frenchhorn.html">Horn</a></li>
<li><a href="trombone.html">Trombone</a></li>
<li><a href="euphonium.html">Euphonium</a></li>
<li><a href="tuba.html">Tuba</a></li>
</ul>
</li>
<li><a href="#"><i class="fas fa-angle-double-right"></i>Woodwind</a></li>
<li><a href="#"><i class="fas fa-angle-double-right"></i>Percussion</a></li>
<li><a href="#"><i class="fas fa-angle-double-right"></i>Additional Materials</a></li>
<li><a href="#"><i class="fas fa-toolbox"></i>Maintenance</a></li>
</ul>
</div>
</div>
</body>
</html>