我已经困惑了一段时间。我正在制作一个带有多个导航按钮的个人网站,其中包括一个下拉菜单。当光标悬停在关于按钮上时,应触发下拉菜单。我使用 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;
}
您需要更新 CSS。下拉内容不是 .about 的子项,所以这样做是.about:hover .dropdown-content
行不通的。您需要使用General Sibling Selector
将其更新为 .about:hover ~ .dropdown-content
编辑
您的 HTML 也有问题,您正在打开按钮标签,但关闭标签会更新它们,它应该可以工作
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句