Question

我创建了一个侧面下拉菜单，所有内容都定位但是每次我将光标移动到菜单上它都会消失，我感觉这与以下内容有关：我已经使用了悬停但是我似乎无法看到让它停止消失任何人都可以帮忙吗？

我的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/

CSS下拉菜单消失

1 个答案: