Question

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

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

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

再次感谢你！

BB

Answer 1

这里我只使用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

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

1 个答案: