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

Question

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

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

有没有可以做到这一点的javascript？我可以查询..

再次感谢你！

bb

Answer 1

Here i have done drop down menu using HTML and CSS only, which show/hide on menu link hover state.

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;
}

I have also done bins for above example, please click on http://codebins.com/codes/home/4ldqpbo