Multi level horizontal menu without JavaScript

1. Write a set of unorder list as below

<div id="nav">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Profile</a></li>
<li><a href="#">Products »</a>
<ul>
<li><a href="#">T-Shirt</a></li>
<li><a href="#">Spender »</a>
<ul>
<li><a href="#">Man</a>
<li><a href="#">Women</a>
</ul>
</li>
</ul>
</li>
<li><a href="#">Testimonial »</a>
<ul>
<li><a href="#">Internal</a>
<li><a href="#">External</a>
</ul>
</li>

<li><a href="#">Booking</a></li>
<li><a href="#">Contact Us</a></li>

</ul>
</div>

2. Write CSS code as below


<style type="text/css">

#container {

width: 768px;

margin: auto;

font-family:Verdana, Geneva, sans-serif;



}

#header {

width: 100%;

background: url(header.gif);

height: 100px;

margin: auto;

}

#nav {

width: 100%;

background:#666;

height: 30px;

margin: 0px;

padding: 0px;

z-index:99;

float:left;

}

#content {

width: 100%;

background:#DDD;

display: table;

border: #999 thin solid;



}



#main {

width: 480px;

background:#FF9;

text-align:justify;

padding: 0px 10px;

}

#row {

display: table-row;

}

#row div {

display: table-cell;

}



#right {

text-align:justify;

padding: 0px 10px;

border-left:#666 thin dashed;

font-size: 0.8em;

}

#footer {

clear: left;

width: 100%;

background:url(footer.gif);

height: 60px;

}

#footer p {

margin: 0px 5px;

padding: 15px;

}



ul {

list-style:none;

margin: 0px;

padding: 0px;

}

li {

margin: 0px;

float:left;

width: 120px;



}

#nav a  {

display: block;



padding: 5px;

border: #F90 1px solid;

text-decoration:none;

background-color:#960;

color:#FC3;

}



#nav a:hover {

background-color:#30F;

}



ul li a:hover, ul li a:focus {

background-color:#CF3;

}







#nav:hover ul li ul, ul li ul, #nav:hover ul li:hover ul li:hover ul, #nav:hover ul li ul li:hover ul, #nav ul li:hover ul li ul  {

display: none;

list-style-type:none;

width: 120px;



}



#nav:hover ul, #nav:hover ul li:hover ul, #nav:hover ul li:hover ul li:hover ul {

display:block;

}



#nav:hover ul li:hover ul li:hover ul, #nav ul li ul li:hover ul,  #nav ul li:hover ul li:hover ul {

position:absolute;

margin: 120px;

margin-top:-20px;

}



#nav:hover ul li:hover ul li ul {

display: none;

}

</style>