个人中心
gpt4 book ai didi

html - 下拉菜单不知何故不起作用

转载 作者：行者123 更新时间：2023-11-28 02:45:48 25 4
gpt4 key购买 nike

我通过 W3School 尝试理解下拉菜单的编码结构。当打开页面并将光标悬停在“Merch”文本上时，它应该会显示下拉菜单。但是，出于某种原因，它没有显示。请为我放大并告诉我哪里出错了。

<!DOCTYPE html>
<html>
  <head>
    <style>
ul {
  margin: 0;
  overflow: hidden;
  background-color: dimgray;
  list-style-type: none;
}

li {
  float: left;
}

li a {
  text-decoration: none;
  font-family: sans-serif;
  display: inline-block;
  color: white;
  padding: 12px;
}

li a:hover {
  background-color: gray;
}

#dropdown {
  position: absolute;
  display: none;
  background-color: darkgray;
  min-width: 140px;
}

#dropdown a {
  color: white;
  text-align: left;
  padding: 10px;
  display: block;
  text-align: left;
}

#dropdown a:hover {
  background-color: gray;
}

#dropbtn:hover #dropdown {
  display: block;
}
    </style>
  </head>
  <body>
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#" id="dropbtn">Merch</a>
        <div id="dropdown">
          <a href="#">Shirts</a>
          <a href="#">Pants</a>
        </div>
      </li>
      <li><a href="#">About Us</a></li>
    </ul>
  </body>
</html>

最佳答案

您需要对 CSS 进行此更改

#dropbtn:hover + #dropdown {
  display: block;
}

下拉列表不是子项，它是当前 html 设置中的下一个元素，因此，这个 selector会找到的。

或者，更好，将 id 放在 li 元素(父元素)上:

<ul>
      <li><a href="#">Home</a></li>
      <li id="dropbtn"><a href="#" >Merch</a>
        <div id="dropdown">
          <a href="#">Shirts</a>
          <a href="#">Pants</a>
        </div>
      </li>
      <li><a href="#">About Us</a></li>
    </ul>


#dropbtn:hover  #dropdown {
  display: block;
}

演示:https://jsfiddle.net/3bfgzf37/

如果您使用第一种解决方案，下拉菜单会快速消失，并且表现得很奇怪......说明:hover on a not hover on dropdown (a is sibling)，hover on li 元素，同时hover on dropdown (parent-child,下拉列表在“内部”li - 产生一致的、期望的行为)。

第二个更好。

ul {
  margin: 0;
  overflow: hidden;
  background-color: dimgray;
  list-style-type: none;
}

li {
  float: left;
}

li a {
  text-decoration: none;
  font-family: sans-serif;
  display: inline-block;
  color: white;
  padding: 12px;
}

li a:hover {
  background-color: gray;
}

#dropdown{
  position: absolute;
  display:none;
  background-color: darkgray;
  min-width: 140px;
}

#dropdown a {
  color: white;
  text-align: left;
  padding: 10px;
  display: block;
  text-align: left;
}

#dropdown a:hover {
  background-color: gray;
}

#dropbtn:hover  #dropdown {
  display: block;
}
<ul>
      <li><a href="#">Home</a></li>
      <li id="dropbtn"><a href="#" >Merch</a>
        <div id="dropdown">
          <a href="#">Shirts</a>
          <a href="#">Pants</a>
        </div>
      </li>
      <li><a href="#">About Us</a></li>
    </ul>

<h3>Dropdown Menu inside a Navigation Bar</h3>
<p>Hover over the "Dropdown" link to see the dropdown menu.</p>

关于html - 下拉菜单不知何故不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41603446/

25 4 0
文章推荐： javascript - 将 HTML 转换为 PDF 分页
文章推荐： javascript - 超过最大堆栈大小
文章推荐： css - 中间标题/两侧菜单
文章推荐： c++ - 如何在 C++ 中将文字字符串和 MACRO 连接到有效字符串