CSS Multilevel menu (Horizontal Multilevel Menu)

To create a multilevel menu in CSS, one should use the nesting of unordered list.
The below given is the simple multi- level menu.


CSS code:
<style type=”text/css”>
#navmenu{
margin:0px;
padding:0px;
}
#navmenu li{
list-style:none;
float:left;
width:100px;
}
#navmenu li a{
display:block;
padding:5px;
background-color:#5e8ce9;
color: #fff;
text-decoration: none;
}
#navmenu li a:hover{
text-decoration:none;
color:#FC3;
}
#navmenu li  ul{
display:none;
width:100px;
background-color:#5e8ce9;
}
#navmenu li:hover ul{
display:block;
position:absolute;
margin:0px;
padding:0px;
width:100px;
background-color:#5e8ce9;
}
#navmenu li:hover li{
float:none;
}
#navmenu li:hover li a{
background-color:#5e8ce9;
border-bottom:1px solid #FFF;
color:#FFF;
}
#navmenu li li a:hover{
background-color:#8db3ff;
}
</style>

HTML Code:
<div id=”navmenu”>
<ul>
<li><a href=”#”>Home</a></li>
<li><a href=”#”>About us</a></li>
<li><a href=”#”>Contact us</a>
<ul>
<li> <a href=”#”>Contact 1</a></li>
<li>  <a href=”#”>Contact 2</a></li>
</ul>
</li>
<li> <a href=”#”>Photos</a></li>
</ul>
</div>

Output: