BASEWEBMASTER

Must See
Superior Unlimited Web Host

Simple CSS Only Drop-Down Menu

Using CSS To Create A Simple Drop-Down Menu

A purely CSS drop-down menu has long been the goal of many webmasters and web designers. Their appeal most probably comes more from the search engine optimization benefits than from the visual appeal. Regardless of the motivation CSS menus are a popular choice. Therefore here is our guide to creating a CSS only drop-down menu much like the one used on this site.

The HTML

The basic principal of a drop-down menu is actually very simple, so lets take a look at the code. In terms of the HTML the first thing to do is to divide each of your navigational elements into unordered lists. One of these lists should be made up of your main navigation elements the other lists will be the drop down options for each of the main menu headings.

These sub-menu lists should be nested within the primary navigation list so that each sub-menu occurs within the parent list item to which it relates, as shown below.

HTML
<ul class='dd_menu'>
<li><a href='#nogo'>Gender</a>
	<ul>
	<li><a href='#nogo1'>Male</a></li>
	<li><a href='#nogo2'>Female</a></li>
	</ul>
</li>
<li><a href='#nogo3'>Hair</a>
	<ul>
	<li><a href='#nogo4'>Blond</a></li>
	<li><a href='#nogo5'>Brown</a></li>
	<li><a href='#nogo6'>Black</a></li>
	<li><a href='#nogo7'>Red</a></li>
	</ul>
</li>
<li><a href='#nogo8'>Eyes</a>
	<ul>
	<li><a href='#nogo9'>Blue</a></li>
	<li><a href='#nogo10'>Green</a></li>
	<li><a href='#nogo11'>Brown</a></li>
	<li><a href='#nogo12'>Grey</a></li>
	</ul>
</li>
</ul>

It is important to notice that the nested lists occur within the parent list item. Without CSS styling this HTML code does not really look like a menu, infact it would look something like this.

unstyled drop-down menu lists

Now you have the basic HTML format of your drop down menu its time to bring on the CSS.

The CSS

As I've said the CSS behind this menu is not particularly difficult. The first thing to do is to style the main menu elements so that they line up in a row and display in a reasonably sized block.

CSS
.dd_menu 	{
	padding:0px; 
	margin:0px; 
	list-style-type:none; 
	height:30px;
}

.dd_menu li 	{
	float:left; 
	height:30px;
}

.dd_menu li a 	{
	padding:9px 20px; 
	display:block; 
	text-decoration:none;
}

.dd_menu li:hover a {
	text-decoration:underline;
}

Secondly we need to style the drop-down menu elements, notice how initially the sub-menus are positioned absolutely and off screen. When the parent list item is hovered over the sub-menu is switched to being displayed relatively. This absolute and relative positioning trick is the basic principle used in creating a drop-down menu with CSS.

CSS
.dd_menu ul	{
	position:absolute; 
	left:-9999px; 
	top:-9999px; 
	list-style-type:none;
}

.dd_menu li:hover	{
	position:relative;
}

.dd_menu li:hover ul 	{
	left:0px; 
	top:30px;  
	padding:3px; 
	width:160px;
}

.dd_menu li:hover ul li 	{
	height:18px; 
	border:none;
}

.dd_menu li:hover ul li a 	{
	height:18px; 
	padding:0px; 
	display:block; 
	width:158px; 
	line-height:18px; 
	text-indent:5px;
}

.dd_menu li:hover ul li a:hover {
	height:18px;
}

The above CSS code forms the basic skeleton format of a drop-down menu. Put together your menu will now look something like the one shown below, try hovering over the main menu elements and notice how the sub-menus appear.

Clearly this menu needs some more styling before its really ready to use. If you wish to understand the basic principles of a drop-down menu in CSS the above CSS code show the vital components.

Finishing Off The Menu

Now we have the basic structure sorted out we simply need to add some more detailed styles like backgrounds and borders. Below is an example of a fully styled drop-down menu along with the source code.

And the full CSS code for this.

CSS
.dd_menu {background:green; padding:0px; margin:0; list-style-type:none; height:30px;}
.dd_menu li {float:left; height:30px; border-right: solid 1px white;}
.dd_menu li a {padding:9px 20px; display:block; color:#fff; text-decoration:none; font:12px arial, verdana, sans-serif; font-weight: bold;}
.dd_menu li:hover a {text-decoration:underline;}

.dd_menu ul {position:absolute; left:-9999px; top:-9999px; list-style-type:none;}
.dd_menu li:hover {position:relative; background:red;}
.dd_menu li:hover ul {left:0px; top:30px; background:lavender; padding:3px; border:1px solid grey; width:160px;}
.dd_menu li:hover ul li {height:18px; border:none;}
.dd_menu li:hover ul li a {height:18px; padding:0px; display:block; font-size:11px; width:158px; line-height:18px; text-indent:5px; color:#444; background-color:lavender; text-decoration:none; border:1px solid transparent;}
.dd_menu li:hover ul li a:hover {height:18px; background:silver; color:#000; border:solid 1px #444;}

Thats it, a drop-down menu created with HTML and CSS alone. Feel free to use the above code as it is or as a starting point for creating a far more advanced CSS menu.

In terms of browser compatibility the above menu will display correctly in all the modern browsers as far as I am aware.

Share to Facebook Share to Twitter Digg This Stumble It Share to Reddit Share to Delicious Technorati LinkedIn Google Buzz Blogger More...

blog comments powered by Disqus