Download CSS Dropdown Menu

This is an easy way to make simple and cross browser compatible drop down menu that uses images for its top link and sub links are in html format

Demo

HTML

<ul id="cssdropdown">
	<li class="headlink home"><a href="http://www.shagilani.com"> </a></li>
	<li class="headlink about"><a href="http://www.shagilani.com">  </a>
<ul>
	<li><a href="http://www.shagilani.com">Lorem ipsum dolor sit </a></li>
	<li><a href="http://www.shagilani.com">Aenean at sapien non</a></li>
	<li><a href="http://www.shagilani.com">Suspendisse sodales</a></li>
</ul>
</li>
	<li class="headlink solutions"><a href="http://www.shagilani.com/blog">  </a>
<ul>
	<li><a href="http://www.shagilani.com">Fusce faucibus</a></li>
	<li><a href="http://www.shagilani.com">Phasellus tempus</a></li>
	<li><a href="http://www.shagilani.com">Praesent a mauris</a></li>
	<li><a href="http://www.shagilani.com">Pellentesque vel lorem</a></li>
	<li><a href="http://www.shagilani.com">Proin fermentum vehicula</a></li>
	<li><a href="http://www.shagilani.com">Morbi sed eros et</a></li>
	<li><a href="http://www.shagilani.com">Nulla a magna orci</a></li>
</ul>
</li>
	<li class="headlink projects"><a href="#">  </a>
<ul>
	<li><a href="http://www.shagilani.com">Donec ullamcorper</a></li>
	<li><a href="http://www.shagilani.com">Phasellus sollicitudin</a></li>
	<li><a href="http://www.shagilani.com">Nulla nec nibh</a></li>
	<li><a href="http://www.shagilani.com">Sed sagittis odio</a></li>
	<li><a href="http://www.shagilani.com">Pellentesque commodo</a></li>
</ul>
</li>
	<li class="headlink contact"><a href="http://www.shagilani.com">  </a></li>
</ul>

CSS

#cssdropdown, #cssdropdown ul {
	list-style: none;
}
#cssdropdown, #cssdropdown * {
	padding: 0;
	margin: 0;
}
#cssdropdown li.headlink {
	float: left;
	text-align: center;
	margin-bottom:5px;
	margin-right:10px;
}
#cssdropdown li.headlink a {
	display: block;
	height:35px;
	font-family:Verdana, Microsoft Sans Serif, Arial, Tahoma;
	color:#fff;
	text-decoration:none;
	font-size:12px;
	font-weight:bold;
	padding-top:8px;
}
/*-------navigation images---------*/

.home {
	width:87px;
	height:40px;
	background-image:url(../images/btnHome.png);
}
.home:hover, .home-h {
	width:87px;
	height:40px;
	background-image:url(../images/btnHomeOver.png);
}
.about {
	width:110px;
	height:40px;
	background-image:url(../images/btnAboutUs.png);
}
.about:hover, .about-h {
	width:110px;
	height:40px;
	background-image:url(../images/btnAboutUsOver.png);
}
.solutions {
	width:110px;
	height:40px;
	background-image:url(../images/btnSolutions.png);
}
.solutions:hover, .solutions-h {
	width:110px;
	height:40px;
	background-image:url(../images/btnSolutionsOver.png);
}
.projects {
	width:110px;
	height:40px;
	background-image:url(../images/btnProjects.png);
}
.projects:hover, .projects-h {
	width:110px;
	height:40px;
	background-image:url(../images/btnProjectsOver.png);
}
.yalbaddad {
	width:151px;
	height:40px;
	background-image:url(../images/btnWhyAlBaddad.png);
}
.yalbaddad:hover, .yalbaddad-h {
	width:151px;
	height:40px;
	background-image:url(../images/btnWhyAlBaddadOver.png);
}
.contact {
	width:122px;
	height:40px;
	background-image:url(../images/btnContactUs.png);
}
.contact:hover, .contact-h {
	width:122px;
	height:40px;
	background-image:url(../images/btnContactUsOver.png);
}
/*-------------------------------------------------*/

#cssdropdown li.headlink a:hover {
	color:#07324b;
	text-decoration:none;
}
#cssdropdown li.headlink ul {
	display: none;
	text-align: left;
	z-index:10;
}
#cssdropdown li.headlink:hover ul {
	display: block;
	width:274px;
	background-color: #efefef;
	position:relative;
	top:-8px;
	background:url(../images/base.png) no-repeat bottom;
	padding:10px 10px 15px 10px;
	height:auto;
	margin-left:-15px;
 *position:relative;
 *left:0px;
 *top:-8px;
}
#cssdropdown li.headlink ul li a {
	font-weight:bold;
	margin-left:15px;
	display:block;
	font-size:12px;
	height:30px;
	line-height:30px;
	width:auto;
	padding:0 10px;
	color:#fff;
	text-decoration:none;
}
#cssdropdown li.headlink ul li a:hover {
	color:#3568ad;
	width:225px;
	background-color:#FFF;
}