下拉列表无效

时间:2014-05-03 04:56:22

标签: javascript html css

当鼠标移出列表的第一个元素时,为什么下拉列表会消失。只有当鼠标移出整个列表时,列表才会消失?请帮忙。

<html>
<head>

<style>
ul{
list-style-type:none;
}

li{
float:left;
}
#hidden2{
display:none;
}
</style>
</head>
<body>
<ul>
    <li >
        <a href="#" onclick="return false;" onmousedown="hidden2.style.display='block'">Names</a> 
            <ul id="hidden2" onmouseout="style.display='none'"> 
                <li><a  href="#">Name1</a>
                    <a  href="#">Name2</a>
                    <a  href="#">Name3</a>
                    <a  href="#">Name4</a>
                </li>
            </ul>       
    </li>
</ul>
<body>
</html>

1 个答案:

答案 0 :(得分:1)

尝试onmouseleave而不是onmouseout

<ul>
    <li >
        <a href="#" onclick="return false;" onmousedown="hidden2.style.display='block'">Names</a> 
            <ul id="hidden2" onmouseleave="style.display='none'"> 
                <li><a  href="#">Name1</a>
                    <a  href="#">Name2</a>
                    <a  href="#">Name3</a>
                    <a  href="#">Name4</a>
                </li>
            </ul>       
    </li>
</ul>

JSFIDDLE