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.


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

CSS Part

ul {
	text-align: left;
	display: inline;
	margin: 0;
	padding: 15px 4px 17px 0;
	list-style: none;
ul li {
	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

Related posts:

Partner with Us

We are providing an exclusive partnership offer to individuals and companies who are interested in setting up their own web design & development company. For more information about how to partner with us, please contact us