如何在html中有多个按钮,但只有一个按钮有可悬停的下拉列表?
我困惑了一阵子。我正在制作一个带有多个导航按钮的个人网站,包括一个下拉菜单。当光标悬停在“关于”按钮上时,应触发下拉菜单。我使用W3Cube的代码作为基础的一部分。 但是,当我将鼠标悬停在菜单触发的任何按钮上时,我尝试自己创建一个。 我反复使用,但都没有成功。我还尝试创建了第二个按钮,但后来我遇到了另一个问题,我无法将按钮(Gallery和Contact)放在另一个按钮(About)旁边。下面是HTML,下面是CSS如何在html中有多个按钮,但只有一个按钮有可悬停的下拉列表?,html,css,hover,dropdown,Html,Css,Hover,Dropdown,我困惑了一阵子。我正在制作一个带有多个导航按钮的个人网站,包括一个下拉菜单。当光标悬停在“关于”按钮上时,应触发下拉菜单。我使用W3Cube的代码作为基础的一部分。 但是,当我将鼠标悬停在菜单触发的任何按钮上时,我尝试自己创建一个。 我反复使用,但都没有成功。我还尝试创建了第二个按钮,但后来我遇到了另一个问题,我无法将按钮(Gallery和Contact)放在另一个按钮(About)旁边。下面是HTML,下面是CSS <nav class="dropdown">
<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>
您需要更新CSS。下拉内容不是的子项。关于这样做
。关于:悬停。下拉内容不起作用。你需要使用
将其更新为。关于:hover~。下拉列表内容
编辑
你的HTML也有问题。你正在打开按钮标签,但关闭标签会更新它们,并且应该可以正常工作。因此我将更改为为。about:hover~。下拉内容
下拉菜单没有出现。现在检查你的HTML也有问题,我已经更新了答案,修复了它,但是下拉菜单没有出现在按钮下,下拉菜单中的按钮无法触及。此外,菜单的背景覆盖整个屏幕宽度。如果它不是太多从原来的问题,我将如何修复它?更新:我已经修复了问题的一部分。通过将位置从相对更改为绝对并添加right:150,现在“关于”按钮下会出现下拉菜单代码>。但是,它不可能点击下拉列表中的任何链接,因为它会立即消失。我只是从w3school获取了代码,然后将其添加到我的网站需要修复的问题中
.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;
}