CSS Dropdownmenu.txt

<style>
/*general menu background*/
#main_menu, #main_menu a, #main_menu a:hover {
background-color: #990066;
background-image: -webkit-linear-gradient(top, #990066, #cc0099, #990066);
background-image: -moz-linear-gradient(top, #990066, #cc0099, #990066);
background-image: -ms-linear-gradient(top, #990066, #cc0099, #990066);
background-image: -o-linear-gradient(top, #990066, #cc0099, #990066);
}

/*

container list*/
#main_menu {
font-family:sans-serif;
list-style-type:none;
text-align:center;
float:left;
width:90%;
border-radius:5px;
box-shadow: 3px 3px 2px #888888;
}

/*top list items*/
.top_menu {
float:left;
position:relative;
border-right:1px solid #ff00cc;
border-left:1px solid #ff00cc;
margin-left:-1px;
}

/*anchors*/
#main_menu a, #main_menu a:hover {
z-index: 999;
color:#ffffff;
display:block;
padding:5px;
text-decoration:none;
width:150px;
border-top-right-radius:2px;
border-top-left-radius:2px;
border-bottom-right-radius:10px;
border-bottom-left-radius:10px;
}

/*sub menu list*/
#main_menu ul {
z-index: 999;
list-style:none;
position:absolute;
display:none;
}

/*sub menu when hover on top item*/
#main_menu li:hover ul {
z-index: 999;
display:block;
}

/*sub menu list items*/
#main_menu ul li {
z-index: 999;
padding-top:1px;
margin-left:-25%;
}

/*sub menu list anchors*/
#main_menu ul a {
z-index: 999;
color:#ffff00;
box-shadow: 3px 3px 2px #888888;
}
</style>

<ul id='main_menu'>
<li class='top_menu'>
	<a href='#'>Products</a>
	<ul>
		<li><a href='#'>Clothing</a></li>
		<li><a href='#'>Furniture</a></li>
		<li><a href='#'>Toys</a></li>
	</ul>
</li>
<li class='top_menu'>
	<a href='#'>Services</a>
	<ul>
		<li><a href='#'>Catering</a></li>
		<li><a href='#'>Advice</a></li>
		<li><a href='#'>Events</a></li>
		<li><a href='#'>Other</a></li>
	</ul>
</li>
<li class='top_menu'>
	<a href='#'>Information</a>
	<ul>
		<li><a href='#'>About</a></li>
		<li><a href='#'>Contact</a></li>
	</ul>
</li>
</ul>
<br/><br/><br/><br/>