A SIMPLE MENU USING CSS

Satyadevanand
Posted by Satyadevanand under CSS 3 category on | Points: 40 | Views : 1542
CSS
<style type="text/css"> 
ul.menu
{
list-style-type:none;
overflow:hidden;
margin:0;
padding:0;
}
li.menu
{
float:left;
display:inline;
}
a.menu
{
font-size:x-large;
display:block;
width:196px;
color:White;
background-color:Black;
text-decoration:none;
text-align:center;
outline-width2:2px;
outline-color:Gray;
}
a.menu:hover
{
color:Black;
background-color:#9370D8;
}
.main:hover
{

}
</style>

JAVA SCRIPT TO HIDE AND VIEW SUBMENU
<script type="text/javascript">
function disp(id)
{
document.getElementById(id).style.display="block";
}
function hide(id)
{
document.getElementById(id).style.display="none";
}
</script>

HTML BODY
<div style="width:100%; height:28px;overflow:hidden;">
<ul class="menu">
<li class="menu" onmouseover="disp('mainDet')" onmouseout="hide('mainDet')"><a class="menu" href="#">Main</a></li>
<li class="menu"><a class="menu" href="#">Contacts</a></li>
<ul class="menu">
<li><a href="#">Sub Menu</a></li>
</ul>
<li class="menu"><a class="menu" href="#">Account</a></li>
<li class="menu"><a class="menu" href="#">About</a></li>
<li class="menu"><a class="menu" href="#">Logout</a></li>
</ul>
</div>

Comments or Responses

Login to post response