Pure HTML and CSS Drop Down Menu Tutorial

I’ve been thinking if it’s possible to create a drop down menu using pure HTML and CSS. But nothing really helped me, until I created my own script.

This script was tested on IE7+, Firefox, Safari, and Chrome. This is only applicable to level two sub menus. You can improvise my codes to add level three sub menus, just don’t forget to share it here.

The CSS

.drop-down-css {
width:800px;
margin:0 auto;
}

.drop-down-css li {
float:left;
display:inline-block;
list-style-type:none;
position:relative;
margin:0 10px;
overflow:hidden;
}

.drop-down-css li:hover {
overflow:visible;
}

.drop-down-css li ul {
position:absolute;
display:block;
left:0px;
top:20px;
margin:0;
width:110px;
padding:0;
background-color:#CCC;
padding:0 10px 10px;
}

.drop-down-css li ul li {
float:none;
margin:0;
display:block;
}

The HTML

<div class="drop-down-css">
	<ul>
		<li><a href="#">Home</a></li>
		<li><a href="#">About Us</a>
			<ul>
				<li><a href="#">History</a></li>
				<li><a href="#">Vission</a></li>
				<li><a href="#">Mission</a></li>
			</ul>
		</li>
		<li><a href="#">Services</a>
			<ul>
				<li><a href="#">Web Design</a></li>
				<li><a href="#">SEO</a></li>
			</ul>
		</li>
		<li><a href="#">Gallery</a></li>
		<li><a href="#">Contact Us</a></li>
	</ul>
</div>

Demo

 

As you can see, this is a way more elegant than other scripts because it’s simple and short. This CSS drop down menu is free to use.