Professional and Affordable Web Design

0800 080 5401

Create a simple drop down menu using CSS

If we have a small website with a simple horizontal menu, it can be very straightforward for visitors to use.

But, when a small website starts to grow, often we need to add additional menu items.
More items in a menu make it less easy to use, and less readable - it is good practise to keep the number of menu items below 7 items. If our menu consists of more elements, it starts to be confusing to our visitors.

What if we need a menu with 14 items (or even more)?

One solution to this is to create a Drop Down Menu. We want our menu be fast loading, lightweight, easy to implement, and SEO compatible so we are going to use CSS.

Building a drop down menu in Flash technology is not a good choice if we want our website to be accessible by search engines like Google. Besides, not all developers will have Flash.

Here you can learn how to create a simple, dynamic, fully customizable drop down menu using CSS and HTML.

1. Use HTML “UL” “LI” to build a list.

Building a list in HTML
<ul>
    <li><a href="#">Element 1</a></li>
    <li><a href="#">Element 2</a></li>
    
	<li><a  class="sub" href="#">Element 3 - drop down menu</a>
		<ul>
			<li><a href="#">Drop down subelement 1</a></li>
			<li><a href="#">Drop down subelement 2</a></li>
			<li><a href="#">Drop down subelement 3</a></li>
			<li><a href="#">Drop down subelement 4</a></li>
			<li><a href="#">Drop down subelement 5</a></li>
		</ul>
    </li>
    
	<li><a href="#">Element 4</a></li>
	
	<li><a  class="sub" href="#">Element 5 - drop down menu</a>
		<ul>
			<li><a href="#">Drop down subelement 6</a></li>
			<li><a href="#">Drop down subelement 7</a></li>
			<li><a href="#">Drop down subelement 8</a></li>
			<li><a href="#">Drop down subelement 9</a></li>
			<li><a href="#">Drop down subelement 10</a></li>
		</ul>
    </li>
    
	<li><a href="#">Element 5</a></li>
    <li><a href="#">Element 6</a></li>
    <li><a href="#">Element 7</a></li>
</ul> 

2. To your CSS add below code:

Hide all sub elements
ul li {
	position: relative;
	width:200px;
}

ul li ul {
	display: none;
} 

This will hide all sub elements. They are put to “UL” tag embedded in another “UL” tag.
See the HTML code at paragraph 1. Width of the menu element is set to 200 pixels.

3. Next we add this code.

Set hover behavior of li elements
 ul li:hover ul {
	display: block;
	position: absolute;
	left: 200px;
	top: -4px;
 } 

We set hover behaviour to our “LI” elements embedded in first level of “UL” tag.
When we hover the “LI” element it will display previously hidden “UL” element of the second level (if they exist. In our example they are located in element number 3 and 5).

Property “POSITION:absolute” and “LEFT:200px” shifts the submenu 200 pixels right, and “TOP: -4px” place submenu items higher.

This example will not work with Internet Explorer 6, because this old fashioned browser doesn't understand “:hover” property connected with anything else than “a” elements.

It is a common Internet Explorer 6 error. There are many ways to fix it - one is to add the “onmouseover” function using JavaScript.

And that's it. Below is the demo. Download it and modify it to your needs.

Useful links

Comments6 Comments

Pablo

Very nice tutorial, thank you for sharing!

05 August 2009

George

Perfect! - I've been looking for a tutorial this good for months. - Simple, gets the job done, and on top of that: JUST WORKS!. Thanks Munity Design.

25 September 2009

Chris

This didn't work for me in IE 7

20 October 2009

rob

hi chris, what is problem you are getting? locally hosted example here is working. let us know problem and we will fix it.

03 November 2009

Frinley

simple and nice thanks for this.

14 April 2010

Ben Stokes

Nice little bit of code there - thank you for sharing.

22 August 2010

All comments are moderated for spam and will not be shown. All genuine comments wil be show, however the links will be based on a NO FOLLOW RULE. Repeat commenters adding value to the articles and discusions will have removed alowing Follow Rule to Work.

Make a Comment

Notify me when someone responds

Quick Contact

See Full Portfolio Some Of Our Work

Screenshot of dsbs.co.uk website
dsbs.co.uk

Driving Schools Booking Service (DSBS) is a network of driving instructors, covering the whole of the UK. For this project, we were...

Screenshot of countysecurity.co.uk website
countysecurity.co.uk

County Security is a fully featured E - commerce solution, with an integrated "system configurator", which allows users to choose...

Customer News & Resources

At Mutiny Design we are constantly gathering together articles and help guides to assist our clients.

Introduction to sitemap.xml

Checking for a sitemap A site map (or sitemap) is a list of pages of a web site accessible to crawlers or users. It can be either a document in any form used as a planning tool for web design, or a web page that lists the pages on a web site, Some developers feel that site index is a more appropriately used term to relay page function, web visitors are used to seeing each term and generally associate both as one and the same. However, a site index is often an A-Z index that provides access to content, while a site map provides a general... Read More »

Center a web page in CSS

One simple way to center a web page using CSS is to create a container div, that is horizontally centered by having its left and right margins set to auto. Using this method, you can still apply colours / background images to the body tag, so its a flexible solution. (if you didnt need this ability, just apply margins and width to the body tag instead, and forget using the container div). The container div has the same width as your webpage and, well, contains it. All the code for your web page is placed inside the container div. This will... Read More »

-