Simple and easy drop down menu using javascript
CSS CODE :
<style>
#menu{ margin:0px auto; height:30px; width:500px; background-color:#009900;}
#menu ul{ margin:0px auto; width:500px; height:30px; background-color:#009900; list-style:none;}
#menu ul a{ text-decoration:none; color:#FFFFFF;}
#menu ul li{ margin:0px auto; height:30px; width:150px; line-height:30px; float:left; text-align:center;}
#menu ul li a:hover{ height:30px; color:#000000; width:150px; }
#sub{ display: none;}
#sub ul{ width:110px; height:auto;}
#sub ul li{ width:110px; float:none; margin-left:-20px; border-bottom:#000000 1px solid;}
#sub1{ display: none;}
#sub1 ul{ width:110px; height:auto;}
#sub1 ul li{ width:110px; float:none; margin-left:-20px; border-bottom:#000000 1px solid;}
</style>
JAVASCRIPT CODE :
<script>
function menu1()
{
document.getElementById("sub").style.display="list-item";
}
function menu2()
{
document.getElementById("sub").style.display="none";
}
function menu3()
{
document.getElementById("sub1").style.display="list-item";
}
function menu4()
{
document.getElementById("sub1").style.display="none";
}
</script>
HTML CODE :
<div id="menu">
<ul>
<li><a href="#">HOME</A></li>
<li onmouseover="menu1()" onmouseout="menu2()"><a href="#">SERVICES</A>
<div id="sub">
<ul>
<li><a href="#">PHP</a></li>
<li><a href="#">mysql</a></li>
<li><a href="#">javascript</a></li>
<li><a href="#">jquery</a></li>
</ul>
</div>
</li>
<li onmouseover="menu3()" onmouseout="menu4()"><a href="#">TUTORIALS</A>
<div id="sub1">
<ul>
<li><a href="#">PHP</a></li>
<li><a href="#">mysql</a></li>
<li><a href="#">javascript</a></li>
<li><a href="#">jquery</a></li>
</ul>
</div>
</li>
</ul>
</div>
No comments:
Post a Comment