javascript - 当我尝试选择选项时下拉菜单消失

Question

我正在尝试使用 HTML、CSS 和 jQuery 为我的网站制作导航栏，但我遇到的问题是，当我将鼠标悬停在具有下拉列表的元素上时，它会在我选择之前消失。这是我的完整代码。

jsFiddle

HTML

    <div id="menu">
        <ul>
            <li><a href="#">Home</a></li>``
            <li><a href="#">About</a>
                <ul>

                    <li><a href="#">Contact</a></li>
                    <li><a href="#">Tell</a></li>   
                    <li><a href="#">Contact</a></li> 

                </ul>
            </li>
            <li><a href="#" class="selected">Contact</a></li>
            <li><a href="#">Tell</a>
                <ul>
                    <li><a href="#">Contact</a></li>
                    <li><a href="#">Tell</a></li>   
                    <li><a href="#">Contact</a></li> 
                </ul>``
            </li>
        </ul>
    </div>

CSS

body{
    margin:0px;
    padding:0px;
}
.selected{
background:#CCC;
}
#menu{
width:500px;
height:70px;
margin:40px auto;
border:1px solid black;
border-radius:5px;
}
#menu ul{
list-style:none;
position:relative;
}
#menu ul li{
float:left;
position:relative;
width:100px;
text-align:center;
}
#menu ul li a{
text-decoration:none;
display:block;
background:black;
color:white;
padding:10px 30px;
line-height:30px;
}

#menu ul li ul{
display:none;
visibility:hidden;
opacity:0;
position:absolute;  
top:50px;
left:0px;
padding:0;
width:150px;    
}
#menu ul li a:hover, #menu ul li .selected{
background:gray;
    color:white;
}


#menu ul li ul li{
    list-style:none;
    width:100%;
    text-align:left;
    position:relative;
}

#menu ul li:hover ul {
    visibility:visible;
    display:block;
    opacity:1;
    width:150px;
}

jQuery

    $(document).ready(function(e) {

    $("#menu ul li a").click(function(e){

        $("#menu ul li a").removeClass("selected");
        }).click (function(){

            $(this).addClass("selected");
            });


        $("#menu ul li a").mouseenter(function(){
            $("#menu ul li ul").slideToggle("fast");

            });     

});

Answer 1

在您的样式中添加一个 z-index，以便您的菜单栏显示在所有其他元素之上。我认为您的页面覆盖了您的下拉菜单。添加

z-index: 99;

到您的菜单类或下拉菜单元素。