Question

我正在尝试为我的导航栏创建一个子菜单，但是当我将鼠标悬停在“主题”上时它没有显示。我可以看到它在“主题”标题下，但是当我将鼠标悬停在“主题”上时，我不确定如何让它出现。我在这方面已经有一段时间了，但没有成功。任何帮助，将不胜感激。非常感谢。

HTML 代码：

</head>
<body>
<header class="navbar">
<div class="container flex">
 <img src="fclLogo1.jpg" alt="FCL Logo" />
        <nav>
          <ul>
            <li><a href="index.html">Home</a></li>
            <li><a href="#">Features</a></li>
            <li><a href="#">About</a></li>
            <li>
              <a href="#">Subjects</a>
              <ul>
                <li><a href="#">Maths</a></li>
                <li><a href="#">English</a></li>
              </ul>
            </li>
          </ul>
        </nav>
      </div>
    </header>
  </body>
</html>

CSS 代码：

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: Arial, Helvetica, sans-serif;
  background-color: #ffffff;
  line-height: 1.6;
}
ul {
  list-style: none;
}

a {
  text-decoration: none;
  color: #ffffff;
}

.navbar {
  background-color: grey;
  height: 70px;
  color: black;
}
.navbar ul {
  display: flex;
}
.navbar ul ul {
  position: absolute;
  background-color: aquamarine;
  padding: 0;
  text-align: left;
  display: block;
}
.navbar ul ul li {
  border: 1px solid;
  display: none;
  width: auto;
  padding: 0;
  padding-left: 10px;
  margin: 0;
}
header li:hover ul {
  display: block;
}
.navbar li {
  padding: 20px;
}
.navbar a {
  padding: 10px;

  margin: 0 5px;
}
.navbar a:hover {
  color: rgb(145, 46, 46);
}

.navbar .flex {
  justify-content: space-between;
  position: relative;
  overflow: visible;
}

.container {
  border: none;
  max-width: 1500px;
  margin: 0 auto;
  overflow: auto;
  padding: 0 40px;
}
.flex {
  display: flex;
  justify-content: center;
}

Answer 1

在此处查看这两个 CSS 选择器：

.navbar ul ul li {
  border: 1px solid;
  display: none;
  width: auto;
  padding: 0;
  padding-left: 10px;
  margin: 0;
}
header li:hover ul {
  display: block;
}

这就是你的问题所在。它们需要是一个公共选择器，唯一的区别是“悬停”伪选择器放置在隐藏元素的父元素上。

我相信这正是您想要的（请注意两个选择器上对“.navbar ul li ul”的更改）：

.navbar ul li ul {
  border: 1px solid;
  display: none;
  width: auto;
  padding: 0;
  padding-left: 10px;
  margin: 0;
}
.navbar ul li:hover ul   {
  display: block;
}

这个网站有更深入的解释：https://leewarrick.com/blog/css-only-menus/。

在导航栏中创建子菜单

1 个答案: