javascript - 如何从多导航栏打开下拉子菜单?
问题描述
我无法使用 CSS 打开我的下拉子菜单。我希望用户将鼠标悬停在相应的标签上时能够打开它。#lablinksDD
当悬停在#menuDD
“#labLinksDD:hover #ddSbMenu
我该怎么做?”时,我试图打开它?我觉得我错过了什么。
代码:
HTML
<ul>
<li><a href="DD/Index.html" class="tpNavBtns">Digital Design (DD) ▾</a></li> <!--▴-->
<ul class="subMenu1" id="menuDD">
<li><a href="#" id="labLinksDD">Labs ▸</a></li> <!--◂-->
<ul class="drpDn-subMenu labSbMenu" id="ddSbMenu">
<li><a href="DD/Labs/Lab_01/LB1_WeiJianZhen_DD.html">DD Lab 1</a></li>
<li><a href="DD/Labs/Lab_02/LB2_WeiJianZhen_DD.html">DD Lab 2</a></li>
<li><a href="DD/Labs/Lab_03/Lab_3.html">DD Lab 3</a></li>
<!--more than 20 a tags inside lists-->
</ul>
CSS
.drpDn-subMenu {
display: none;
position: absolute;
width: 200px;
height: 500px;
top: 0px;
left: 164px;
overflow-x: hidden;
overflow-y: scroll;
background-color: red;
list-style-type: none;
border-left: 1px solid rgba(120, 120, 120, 0.70);
border-bottom: 1px solid rgba(120, 120, 120, 0.70);
}
.drpDn-subMenu a {
display: inline-block;
position: relative;
padding: 20px 50px;
width: 100%;
height: auto;
text-align: left;
}
#menuDD {
top: 100%;
left: 13.6%;
}
#menuWCP {
top: 50px;
left: 800px;
}
.labSbMenu {
z-index: 3;
}
.prSbMenu {
top: 56px;
height: auto;
background-color: antiquewhite;
}
我也会接受 Vanilla JavaScript 版本而不是 CSS 版本。
解决方案
不确定这就是您要查找的内容,但您可以使用 Javascript 函数:
<li><a href="#" id="labLinksDD" onclick="showLabLinks()">Labs ▸</a></li>
<script>
function showLabLinks() {
document.getElementById("ddSbMenu").style.display = "block";
}
</script>
推荐阅读
- python - 从 URL python 读取 xml
- angular - Angular:使用路由过滤
- networking - AttributeError:“dict”对象没有属性“splitlines”
- multithreading - 如何解决心跳超过“00:00:01”失败?
- postgresql - Postgres - 禁止相同记录的触发器(链接 - 作为一组)
- excel - 在列表框中搜索和填充值
- cucumber - 在每种情况下启用设置的正确方法是什么
- selenium - 如何使用 Selenium 下载此类文件
- ruby - 在非 Rails Ruby 中接受服务器端任意大小的上传?
- c# - 如何获取列表中具有相同前缀的所有单词?C#