在 html 中，您如何拥有多个按钮但只有一个按钮具有可悬停的下拉菜单？

Question

我也疑惑了一阵子。我正在制作一个包含多个导航按钮（包括一个下拉菜单）的个人网站。当光标悬停在关于按钮上时，应触发下拉菜单。我使用 W3School 的代码作为基础的一部分。然而，我曾尝试自己创建一个，当我将鼠标悬停在菜单触发的任何按钮上时。我一直在使用和使用，但都没有成功。我也尝试创建第二个，但后来我运行遇到另一个问题，我无法让按钮（画廊和联系人）坐在另一个按钮（关于）旁边。下面是 HTML 进一步是 CSS.

<nav class="dropdown">
<button class="about" href="about.html">About </button>
<button class="gallery" href="gallery.html">Gallery </a>
<button class="contact" href="contact.html">Contact </a>
<div class="dropdown-content"> 
    <a href="achievements.html">Achievements </a>
    <a href="education.html">Education </a>
    <a href="hobbies.html">Hobbies </a>
    <a href="career.html">Career </a>
</div>

.dropdown{
   font-size: 22px;
   font-family: "Arvo", serif;
   font-weight: bold;
   text-align: right;
   position:relative;
 } 
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
  display: none;
  position: relative;
  background-color: #f1f1f1;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;

 }
 /* Links inside the dropdown */
  .dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;

 }.dropdown-content a:hover {
   background-color: #ddd;
 }
.about:hover .dropdown-content {
     display: block;

   }
.about:hover {background-color: transparent;

 }

Answer 1

您需要更新 CSS。下拉内容不是 .about 的子项，因此 .about:hover .dropdown-content 不会起作用。您需要使用 General Sibling Selector

更新为.about:hover ~ .dropdown-content

编辑

您的 HTML 也有问题您正在打开按钮标签，但关闭标签会更新它们，它应该可以工作

在 html 中，您如何拥有多个按钮但只有一个按钮具有可悬停的下拉菜单？

How do you have multiple buttons but only one has a hoverable dropdown in html?

html

css

hover

dropdown