Inspiration For Creative Minds
Home » Labs » CSS dropdown menu with example  

Filed under Labs

Here is a simple css drop down menu which can be useful in web design projects. You can view the working example and also find the source code used in demo. Hope it will be helpful for web designers.

HTML Part

 
		<nav class="clearfix" role="navigation">
			<ul><li>Home</li>
			  <li>About us</li>
			  <li>
				Services
				<ul>
				  <li>Web Design</li>
				  <li>Web Development</li>
				  <li>WordPress Development</li>
				</ul>
			  </li>
			  <li>
				Products
				<ul>
				  <li>Web CRM Software</li>
				  <li>Email Marketing Software</li>
				  <li>Portal Software</li>
				  <li>Premium Wordpress Themes</li>
				</ul>
			  </li> 
			  <li>Blog</li>
			  <li>Contact Us</li>
			</ul>
		</nav>

CSS Part

 
nav{
	float:right;
	width:60%;
}
ul {
	text-align: left;
	display: inline;
	margin: 0;
	padding: 15px 4px 17px 0;
	list-style: none;
}
ul li {
	font-size:18px;
	font-weight:300;
	display: inline-block;
	margin-right: -4px;
	position: relative;
	padding: 15px 20px;
	background: #fff;
	cursor: pointer;
}
ul li:hover {
	background: #555;
	color: #fff;
}
ul li ul {
	padding: 0;
	position: absolute;
	top: 48px;
	left: 0;
	width: 250px;
	display: none;
	opacity: 0;
	visibility: hidden;
}
ul li ul li { 
	background: #555; 
	display: block; 
	color: #fff;
	border-bottom:1px solid #666;
}
ul li ul li:hover { background: #666; }
ul li:hover ul {
	display: block;
	opacity: 1;
	visibility: visible;
}

Demo Download

It's only fair to share...Share on Google+Tweet about this on TwitterShare on Facebook
Labs

Posts you may like: