hi!
i am trying to creat a drop down menu using js.i have made the menu using onMouseOver event handler.but as soon as i remove the mouse it disappears.what i am trying to say is i cant hold the menu bar on the screen.i only made it for the first list item.
please help me on this!!
my codes are---
Code:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
*{margin:0px;padding:0px;}
#design{
	width:100%;
	height:60px;
	background-color:#00CCFF;
}
#design ul {
	list-style-type:none;
}
#design ul li{
	display:inline-block;
	margin-left:10px;
	padding:0px;
	height:58px;
	border:0px solid black;
	
}
#design ul li a{
	text-decoration:none;
	font-size:30px;
	border:0px solid black;

	padding:10px;
	margin-top:0px;
}
#clear{
	background-color:#33FF33;
	height:110px;
	width:120px;
	position:relative;
	top:-150px;
}
#clear ul{
	list-style-type:none;
}
#clear ul li{
	margin-top:0px;
	margin-left:5px;
}
#clear ul li a {
	text-decoration:none;
	font-size:20px;
}
#container{
	width:300px;
	height:110px;
	overflow:hidden;
	border:0px solid;
}
</style>
<script>
function show(elem){

var drop=document.getElementById(elem);
drop.style.webkitTransition="top .5s ease-in-out";	
drop.style.top="0px";

}
function vanish(elem){
	var drop=document.getElementById(elem);
drop.style.webkitTransition="top .5s ease-in-out";	
drop.style.top="-150px";
	
}
</script>
</head>

<body>
<div id="design">
<ul>
<li onMouseOver="show('clear');" onMouseOut="vanish('clear');" ><a href="d">home</a></li>
<li><a href="d">contact us</a></li>
<li><a href="d">aboutus </a></li>
<li><a href="g">faqs</a></li>
</ul>
</div>
<div id="container">
<div  id="clear">
<ul>
<li><a href="d">my home</a></li>
<li><a href="g">yours</a></li>
<li><a href="r">theirs</a></li>
<li><a href="e">hers</a></li>
</ul>
</div>
</div>
</body>
</html>