Pure CSS3 Dropdown Menu

Forget Javascript… It’s all about CSS3

The days of having to use bloated Javascript for the most simple of dropdown menus are over!! Though this is a very simple example, with no fancy effects it does the job and in my opinion looks better than a fading or sliding dropdown menu.

The whole of this menu is built using only HTML and CSS, there are no images used as background gradients and the corners are rounded using CSS3. Unfortunately this means that IE8 and lower will not render the rounded corners… but does it really matter?

Below is the code used to power this little beaut!

» Demo Here

<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8" />
<title>Pure CSS3 Dropdown Menu - TheWebTaylor</title>
<style>
.body,html{margin:0;padding:0;font:12px Arial;}
#wrapper{width:880px;overflow:hidden;margin:15px auto;}
#header{background:url(http://images.thewebtaylor.co.uk/logo.png) no-repeat;height:49px;}
#header h1{float:right;line-height:49px;font-size:30px;color:#0099CC;margin:0;}
#menu{border-radius:4px;-moz-border-radius:4px;-webkit-border-radius:4px;border:1px solid #1A7D9E;list-style:none;padding:0;height:30px;
background:#0099CC;background:-moz-linear-gradient(center top , #0099CC, #1A7D9E);background:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#0099CC), to(#1A7D9E));filter:progid:DXImageTransform.Microsoft.gradient(startColorstr = '#0099CC', endColorstr = '#1A7D9E');}
#menu li{float:left;}
#menu li a{text-decoration:none;}
.mainMenu{color:#FFF;font-weight:700;}
.mainMenu:hover{text-shadow:0 0 2px #0099CC;background:#1A7D9E;}
#menu a{line-height:30px;padding:0 20px 1px;display:block;}
#menu li ul{display:none;}
#menu li:hover ul{width:150px;display:block;position:absolute;list-style:none;padding:5px 10px 10px;margin:0;border:1px solid #CCC;border-top:0;border-radius:0 0 4px 4px;-moz-border-radius:0 0 4px 4px;-webkit-border-radius:0 0 4px 4px;
background:#FFFFFF;background:-moz-linear-gradient(center top , #FFFFFF, #EAEAEA);background:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#FFFFFF), to(#EAEAEA));filter:progid:DXImageTransform.Microsoft.gradient(startColorstr = '#FFFFFF', endColorstr = '#EAEAEA');}
#menu li:hover ul{}
#menu li ul li a{display:block;color:#333;border-bottom:1px dotted #CCC;float:none;width:110px;}
#menu li ul li a:hover{font-weight:700;}
</style>
</head>

<body>
	<div id="wrapper">
		<div id="header">
			<h1>Pure CSS3 Dropdown Menu</h1>
		</div>
		<ul id="menu">
			<li><a class="mainMenu" href="#">Home</a></li>
			<li>
				<a class="mainMenu" href="#">Services</a>
				<ul>
					<li><a href="#">Service 1</a></li>
					<li><a href="#">Service 2</a></li>
					<li><a href="#">Service 3</a></li>
				</ul>
			</li>
			<li>
				<a class="mainMenu" href="#">About</a>
				<ul>
					<li><a href="#">About 1</a></li>
					<li><a href="#">About 2</a></li>
					<li><a href="#">About 3</a></li>
				</ul>
			</li>
			<li><a class="mainMenu" href="#">Blog</a></li>
			<li><a class="mainMenu" href="#">Conact</a></li>
		</ul>
	</div>
</body>
</html>