Javascript在悬停状态下制作下拉菜单 - 没有HTML中的硬编码

Javascript to make dropdown menus on hover state - no hard-coding in HTML

本文关键字：HTML 没有 编码 下拉菜单 悬停 状态 Javascript      更新时间：2023-09-26

提前感谢。我实际上已经尝试了几个javascript脚本来让它工作，但没有一个，但我对javascript的理解非常基本。

我无法调整链接本身的代码 - 它正在生成。但它是用 id 和类生成的。我想在文档中有一个引用链接 id 的脚本，以便当用户滚动链接时，会出现一个隐藏的 ul（或div） - 就像一个普通的 css 导航下拉菜单，但同样，我无法更改实际链接的代码。我只能一般地更改 CSS。

有没有JavaScript可以做到这一点？我可以做查询。

再次感谢！

哗啦��

在这里，我仅使用 HTML 和 CSS 完成了下拉菜单，它们在菜单链接悬停状态上显示/隐藏。

.HTML：

<div id="menu1" class="menu">
  <a href="#" id="link1">
    Menu-1
  </a>
  <div id="menulist1" class="menulist">
    <div>
      Option1
    </div>
    <div>
      Option2
    </div>
    <div>
      Option3
    </div>
    <div>
      Option4
    </div>
    <div>
      Option5
    </div>
  </div>
</div>
<div id="menu2" class="menu">
  <a href="#" id="link2">
    Menu-2
  </a>
  <ul id="menulist2" class="menulist">
    <li>
      Option1
    </li>
    <li>
      Option2
    </li>
    <li>
      Option3
    </li>
    <li>
      Option4
    </li>
    <li>
      Option5
    </li>
  </ul>
</div>

.CSS：

.menu{
  font-size:15px;
  display:inline-block;
  margin:0px;
  padding:0px;
}
.menu a{
  display:block;
  width:120px;
  text-align:center;
  background-color:#2211ce;
  color:#dccb00;
  text-decoration:none;
}
#menulist1{
  position:absolute;
  top:33px;
  border:1px solid #113399;
  background-color:#88a5ff;
  display:none;
}
#menulist2{
  position:absolute;
  top:20px;
  border:1px solid #113399;
  background-color:#88a5ff;
  display:none;
}
#menu1:hover #menulist1{
  display:block;
}
#menu2:hover #menulist2{
  margin-top:13px;
  display:block;
}
.menulist div{
  margin-left:0px;
  padding:3px;
  width:112px;
}
.menulist li{
  list-style:none;
  width:72px;
  padding:3px;
  margin-left:0px;
  display:block;
}
.menulist div:hover,.menulist li:hover{
  background-color:#1155ac;
  color:#dccb00;
}

我也为上面的例子做了垃圾箱，请点击 http://codebins.com/codes/home/4ldqpbo

相关文章：