heres a the code that creates the dropdown menu using javascript and css.
<html>
<head>
<title>Dropdown Sample</title>
<link rel="stylesheet" type="text/css" href="css.css"/>
<script type="text/javascript">
//this function is the one who is responsible in displaying the submenu
function showSub(){
document.getElementById('subMenuDiv').style.display = "";
}
//this function is the one who is responsible in hiding the submenu
function hideSub(){
document.getElementById('subMenuDiv').style.display = "none";
}
</script>
</head>
<body>
<div id="menuDiv">
<ul>
<li onmouseover="showSub();" onmouseout="hideSub();"><a href="#">Menu 1</a>
< !-- the display:none is responsible for hiding the submenu when the page is newly opened -- >
<div id="subMenuDiv" style="display: none;">
<ul class="subMenu">
<li><a href="#">Sub Menu 1</a></li>
<li><a href="#">Sub Menu 2</a></li>
<li><a href="#">Sub Menu 3</a></li>
</ul>
</div>
</li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
</ul>
</div>
</body>
</html>
#menuDiv ul{
margin: 0px;
padding: 0px;
}
#menuDiv ul li {
list-style: none;
display: inline;
margin: 0 5px;
padding: 0;
background-color: #A80000;
}
#menuDiv ul li a{
text-decoration: none;
font-weight: bold;
padding: 0 10px 0 10px;
background-color: #A80000;
color: #FFF;
}
#subMenuDiv {
padding: 0px;
position: absolute;
}
/*heres a little css hack*/
* html #subMenuDiv {
position: absolute;
margin-top: 18px;
margin-left: -82px;
}
#subMenuDiv ul{
margin: 0px;
padding: 0px;
}
#subMenuDiv ul li{
display: block;
border: 1px solid #B0B0B0;
padding: 0px;
}
#subMenuDiv ul li a{
background-color: #D00000;
padding: 0 10px;
}
#subMenuDiv ul li a:hover {
background-color: #E00000;
}
there you have it folks. I really hope that that code helps you.
-
Posts
No comments:
Post a Comment