CSS dropdown menu with example

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