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>
Free Graphics, Icons, Tutorials
Free Graphics Free Christmas Vector Icon Graphics Pack 2017Free Fitness Vector Icons Graphics PackFree Camping Vector Graphics PackFree Summer Graphics PackFree File Icon PackFree Fast Food Vector Graphics
Sharing is caring...
Like & Follow
Share the love, share this page! Facebook Twitter Google Digg Reddit LinkedIn Pinterest Email
Close [X]
The Web Taylor
1000 Lakeside North Harbour Portsmouth, Hampshire PO6 3EN
02392 123358