A SIMPLE MENU USING 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>

<script type="text/javascript">
    function disp(id)
    {
        document.getElementById(id).style.display="block";
    }
    function hide(id)
    {
        document.getElementById(id).style.display="none";
    }
    </script>

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