你怎么有多个按钮,但只有一个在 html 中有一个可悬停的下拉菜单?

贝阿滕贝格

我已经困惑了一段时间。我正在制作一个带有多个导航按钮的个人网站,其中包括一个下拉菜单。当光标悬停在关于按钮上时,应触发下拉菜单。我使用 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] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

CSS在下拉菜单中有另一个下拉菜单

如何设计一个 html 5 下拉菜单

Bootstrap CSS 没有正确加载,看起来像一个典型的 HTML/CSS 下拉菜单

HTML全部按钮不起作用,只有一个按钮起作用

html表单两个按钮只有一个提交

WordPress下拉菜单重叠-悬停一个可打开另一个

你如何用 HTML 制作一个只有一个正确用户名和一个密码的登录页面屏幕?

HTML <SELECT>下拉菜单,显示多个,但一次只能选择一个

有没有办法在处理所有 HTML 按钮的 jQuery 中只有一个函数?

具有一个主下拉菜单的多个下拉菜单实现

多个下拉菜单,即使我单击另一个下拉菜单,也只有一个可用

AngularJS:为什么我的下拉菜单中有一个初始空白条目?

HTML中的AngularJS多个指令。只有一个出现

建立简报网站时,拥有多个HTML文件还是只有一个大HTML文件效率更高?

在选择列表中有一个按钮是有效的 HTML 吗?

如何使html中的下拉菜单与另一个div重叠

在一个HTML页面中从mysql开始开始日期和下拉菜单

有可能在div背景中制作一个三角形图案,只有css3 / html吗?怎么了

HTML表操作(在一个<tr>或<td>中有多个行/列)

有一个按钮启动选项选择下拉菜单

一个下拉菜单,显示带有添加按钮的结果

将值从HTML下拉菜单传递给GAS功能,并更新另一个HTML下拉菜单

当我通过另一个下拉菜单悬停时,出现下拉菜单的子菜单

单击时,将类添加到HTML列表中的一个且只有一个元素

我有两个下拉菜单,如果更改下拉菜单的值,它将影响另一个下拉菜单

从所有下拉菜单中选择一个时,如何禁用其他下拉菜单

当下拉菜单具有相同的ID时,如何从下拉菜单中选择一个选项

具有自动选择一个选项的动态下拉菜单及其子下拉菜单选项

如何防止HTML元素的换行符中只有一个吊词?