CSS 下拉菜单消失

Question

我创建了一个侧面下拉菜单，所有内容都已定位，但是每次我将光标移到菜单上时它都会消失，我觉得这与我使用过的 :hover 有关，但我似乎无法让它停止消失 有人可以帮忙吗？

我的 html 是:

<div class="navBar">
    <ul>
        <li class="navText"><a href="#">L1</a></li>
        <li class="navText dropdownTrigger">L2</li>


                <ul class="dropdown">
                    <li><a href="#">L6</a></li>
                    <li><a href="#">L7</a></li>
                    <li><a href="#">L8</a></li>
                    <li><a href="#">L9</a></li>
                    <li><a href="#">L10</a></li>
                </ul>

        <li class="navText"><a href="#">L3</a></li>
        <li class="navText"><a href="#">L4</a></li>
        <li class="navText"><a href="#">L5</a></li>

    </ul>

</div>

我的CSS是:

* {
    padding:0px;
    margin:0px;
}

body {
    background-color:rgba(17,17,17,1);
    background-size:cover;
}

.navBar {
    position:fixed;
    width:70px;
    height:100%;
    padding-top:100px;
    background-color:rgba(255,255,255,0.5);
    text-align:center;
}

.navBar > ul > li,
.navBar > ul > li > a  {
    margin-top:70px;
    text-decoration:none;
    display:block;
    color:black;
    font-family:"Constantia";
    font-size:30px;

}

.navBar > ul > ul > li,
.navBar > ul > ul > li > a {
    display:block;
    list-style-type:none;
    text-decoration:none;
    color:black;
    font-family:"Duan Penh";
    font-size:24px;
}


.navBar a:hover,
.navBar li:hover {
    background-color:rgba(0,0,0,0.5);
    color:white;
    font-weight:bold;
}
.navBar > ul > ul {
    background-color:rgba(255,255,255,0.5);

    width:200px;
    height:auto;
    margin-left:70px;
    margin-top:-35px;
    position:absolute;
    display:none;


}

.dropdownTrigger:hover ~ .dropdown {
    display:block;
}

Answer 1

试试这个

.dropdownTrigger:hover ~ .dropdown, .dropdown:hover {
    display:block;
}

jsFiddle:https://jsfiddle.net/ojf32faz/