Drop down list not working

Question

Why does the drop down list fades away when the mouse moves out of the very first element of the list.The list should fad out only when the mouse moves out of the entire list?Please help.

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

Answer 1

Try onmouseleave instead of 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

Drop down list not working

Question

1 answers

solution1
1 ACCPTED 2014-05-03 05:07:15

Drop down list not working

Question

1 answers

solution1 1 ACCPTED 2014-05-03 05:07:15

solution1
1 ACCPTED 2014-05-03 05:07:15