Dropdown lists as a navigation menu is commonly used as a way to help users navigate through a website. Creating them can sometimes be a bit difficult and some require more code than necessary, especially when you include jQuery or other JavaScript functionality into them. However, today I’ll show you a quick, easy, and beautiful way of creating a dropdown navigation using only HTML and CSS3.
The HTML Structure
First let’s start off with a simple unordered list of nav items.
[HTML]
<html>
<head>
<link href=’dropdown.css’ rel=’stylesheet’ type=’text/css’/>
</head>
<body>
<ul id=”nav”>
<li><a href=”/”>Home</a></li>
<li><a href=”/”>About</a></li>
<li><a href=”/design”>Design</a>
<ul>
<li><a href=”/design/webdesign”>Web</a></li>
<li><a href=”/design/graphicdesign”>Graphic</a></li>
</ul>
</li>
<li><a href=”/tutorials”>Tutorials</a>
<ul>
<li><a href=”/design/webdesign”>Web</a>
<ul>
<li><a href=”/design/webdesign/html”>HTML</a></li>
<li><a href=”/design/webdesign/css”>CSS</a></li>
<li><a href=”/design/webdesign/javascript”>JavaScript</a></li>
</ul>
</li>
<li><a href=”/design/graphicdesign”>Graphic</a></li>
</ul>
</li>
</ul>
</body>
</html>
[/HTML]
Next, we’ll style the navigation menu. Please note that I’ll be using some CSS3 to include into the stylesheet and also including older browser fallbacks for some of the styles.
[CSS]
body {
font-family: ‘Helvetica Neue’,’Helvetica’, arial, sans-serif;
}
#nav{
width:1000px;
margin:0 auto 10px;
padding: 0 0 0 2%;
list-style:none;
font-weight:bold;
border: 1px solid #999;
background: #ddd;
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#ccc), to(#fff));
background: -webkit-linear-gradient(top, #fff, #ccc);
background: -moz-linear-gradient(top, #fff, #ccc);
background: -ms-linear-gradient(top, #fff, #ccc);
background: -o-linear-gradient(top, #fff, #ccc);
background: linear-gradient(top, #fff, #ccc);
-webkit-border-radius: 30px;
-moz-border-radius: 30px;
border-radius: 30px;
-moz-box-shadow: 0 1px 4px rgba(0,0,0,0.5);
-webkit-box-shadow: 0 1px 4px rgba(0,0,0,0.5);
-ms-box-shadow: 0 1px 4px rgba(0,0,0,0.5);
-o-box-shadow: 0 1px 4px rgba(0,0,0,0.5);
box-shadow: 0 1px 4px rgba(0,0,0,0.5);
}
#nav li{
display: inline-block;
margin-right:10px;
position:relative;
}
#nav a{
display:block;
padding:14px 5px;
color:#444;
text-decoration:none;
text-shadow: 0 1px 0 rgba(255,255,255,0.9);
}
#nav a:hover{
color:#666;
background:#999;
}
#nav ul{
background:#fff;
background:rgba(255,255,255,0);
list-style:none;
position:absolute;
left:-9999px;
}
#nav ul li{
padding-top:1px;
float:none;
width: 100px; /* width of each list item in the dropdown */
}
#nav ul a{
white-space:nowrap;
}
#nav li:hover ul{
left:0;
padding: 0;
}
#nav li:hover a{
background:#ccc;
}
#nav li:hover ul li a:hover{
background:#bbb;
}
#nav ul ul {
display: none;
margin: 0 0 0 100px; /* left margin for the width of each dropdown item*/
padding: 0;
top: 0;
}
#nav li:hover ul li:hover ul {
display: block;
}
[/CSS]
Conclusion
As you can see, it’s quite simple to create your own well-designed navigation with just a few lines of HTML and CSS. As more and more browsers adapt to using CSS3, it’ll become easier for web designers to design navigation elements such as this without the need to design it in Photoshop or other software.
Files: how_to_create_dropdown_using_html_and_css
If you like this tutorial, please let me know in the comments below and tell me if you want more tutorials like these.
Other tutorials you might like: