如何从多导航栏打开下拉子菜单？

Question

I am having trouble opening my dropdown sub-menu with CSS. I want the user to be able to open it when hovered over the corresponding tag. I tried to make #lablinksDD open when hovered over #menuDD with #labLinksDD:hover #ddSbMenu How may I do that? I feel like I am missing something.

Code:

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

I'll also accept a Vanilla JavaScript version instead of a CSS one.

Answer 1

Not sure that's what you're looking for, but you could use a Javascript function:

<li><a href="#" id="labLinksDD" onclick="showLabLinks()">Labs ▸</a></li>


<script>
        function showLabLinks() {
        document.getElementById("ddSbMenu").style.display = "block";
        }
</script>

Answer 2

If you change the id from the anchor to the list item or add different id or class to the list item then you can solve this with CSS general sibling selector (~) or adjacent sibling selector (+) without JS, see https://www.w3schools.com/css/css_combinators.asp :

#labLinksDD:hover~#ddSbMenu {
    display: block;
}