在下拉导航菜单中适配页面的问题

Question

在我的导航部分，我有主页、铜管乐器、木管乐器、打击乐器、附加设备、维护等部分。 Brass、Woodwind 和 Percussion 部分应该下拉以显示属于这些部分的页面，但我无法做到这一点。 我已尝试使用以下代码使其工作，但它不起作用。

.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>

Answer 1

你试过这个吗？ [我只是建议使用类或 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>

Answer 2

第一个问题是你的黄铜 li 没有正确关闭。 它没有正确包装子元素。

然后我对 CSS 和 HTML 做了一些调整。 我给孩子 li(s) 添加了一个类，.hidden-child。 这应该确保，当您将鼠标悬停在一个菜单项上时，您的悬停不会触发所有菜单项的每个子 ul 的显示。

 *{ 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>