Refine Post By:

Creating a navigation dropdown menu without the use of Javascript is simple. Truth be told, it doesn’t take much at all. A CSS drop down menu are very simliar to Javascript dropdowns. The only difference is that CSS dropdowns don’t use Javascript. Shocked?

Here’s a demo of what we’re going to do.

The Markup

We start with our HTML skeleton. We’re going to use the HTML list elements to create our navigation and sub-navigational structure. If you are familiar with the use of HTML list elements to create a standard navigation (which you should be), keep reading. If not, take a look at this article: CSS Navigation Bars.

We’re going to create an unordered list (ul) and use the list element (li) to create our first level of navigational links.

The HTML Skeleton:

1
2
3
4
5
<ul id="navigation">
	<li><a href="#">No Dropdown</a></li>
	<li><a href="#">Dropdown</a></li>
	<li><a href="#">Dropdown 2</a></li>
</ul>

Simple right? Now let’s move forward and create our sub-navigation. The sub-navigation is also known as the second layer of navigation. We do this by creating a new unordered list (ul) within the associated “parent” (li) navigation. In other words, within the list element (li) that we want to have a dropdown menu for, we will create a new unordered list. Your HTML markup will look something like this:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<ul id="navigation">
	<li>
		<a href="#">No Dropdown</a>
	</li>
	<li><a href="#">Dropdown</a>
		<ul class="sub_navigation">
			<li><a href="#">Sub Navigation 1</a></li>
			<li><a href="#">Sub Navigation 2</a></li>
			<li><a href="#">Sub Navigation 3</a></li>
		</ul>
	</li>
	<li><a href="#">Dropdown 2</a>
		<ul class="sub_navigation">
			<li><a href="#">Sub Navigation 1</a></li>
			<li><a href="#">Sub Navigation 2</a></li>
			<li><a href="#">Sub Navigation 3</a></li>
		</ul>
	</li>
</ul>

Boom! Now we got our markup. The HTML skeleton for our dropdown menu is complete! Also take the time to notice the element id and classes I associated with our lists. This will give you a better visual representation of what’s going on within our markup. Additionally, these classes and id’s will help us with our future CSS styling.

The Styling

Let’s start styling the markup so that it doesn’t look so cluttered. The first thing we need to do is remove the padding and margin around our unordered list (ul). By default, HTML lists have margins and padding that don’t mesh well with our navigation. It only makes sense to remove them.

1
2
3
4
5
ul {
	margin:0;
	padding:0;
	list-style-type:none;
}

Next, we’re going to make our list look more like a horizontal navigation instead of a vertical list. We do this by using the float property. If you are unfamiliar with the float property, read this. We’re also going to set a min-width to our list elements so that the content within it doesn’t get crammed up. Finally, we’re going to add a border around the list items to make them look more like buttons.

1
2
3
4
5
6
7
8
9
ul#navigation {
	float:left;
}
 
ul#navigation li {
	float:left;
	border:1px black solid;
	min-width:200px;
}

Easy enough right? Let’s focus in on our sub-navigation. We basically want the sub-navigation to have a “vertical” to give it that “dropdown” effect. We also want to display the sub-navigation underneath the parent “navigation”. We’re going to achieve this effect by changing the position of our sub-navigation to absolute and using the clear property within the list items (li) to achieve the vertical effect. We also need to hide the sub-navigation by default because we only want to display the sub-navigation when someone hovers over the parent navigation. We do this by setting the display to none.

1
2
3
4
5
6
7
8
ul.sub_navigation {
	position:absolute;
	display:none;
}
 
ul.sub_navigation li {
	clear:both;
}

Lastly, we’re going to create our hover effect. This is done by using the :hover pseudo class and than using the display property to show the sub-navigation during the hover. Take a look:

1
2
3
#navigation li:hover .sub_navigation { 
	display: block; 
}

Voila! We got our dropdown menu! One line of code handles the entire drop-down effect for our navigation. The rest of the CSS was just to make it look pretty.

The Final Product

Here is the entire markup together if you want to take a look at everything together.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
<!DOCTYPE HTML>
<html>
<head>
	<style type="text/css">
	ul {
		margin:0;
		padding:0;
		list-style-type:none;
		min-width:200px;
	}
 
		ul#navigation {
			float:left;
		}
 
		ul#navigation li {
			float:left;
			border:1px black solid;
			min-width:200px;
		}
 
		ul.sub_navigation {
			position:absolute;
			display:none;
		}
 
		ul.sub_navigation li {
			clear:both;
		}
 
		#navigation li:hover .sub_navigation { display: block; }
		
		a,
		a:active,
		a:visited {
			display:block;
			padding:10px;
		}
	</style>
</head>
<body>
<ul id="navigation">
	<li>
		<a href="#">No Dropdown</a>
	</li>
	<li><a href="#">Dropdown</a>
		<ul class="sub_navigation">
			<li><a href="#">Sub Navigation 1</a></li>
			<li><a href="#">Sub Navigation 2</a></li>
			<li><a href="#">Sub Navigation 3</a></li>
		</ul>
	</li>
	<li><a href="#">Dropdown 2</a>
		<ul class="sub_navigation">
			<li><a href="#">Sub Navigation 1</a></li>
			<li><a href="#">Sub Navigation 2</a></li>
			<li><a href="#">Sub Navigation 3</a></li>
		</ul>
	</li>
</ul>
</body>
</html>

Hope this helped and wasn’t too boring! I’m glad you made it to the end.
Again, if you want to see an example of the final product, here’s a demo. Enjoy!

5 Comments

  1. what if I want the subnav to appear beside the parent navigation instead of under it?

  2. Thumbs up. Thanks a lot for article. This is wehere I learnt the basic. You have explained it really well.

  3. Simple example, thank you :D

  4. Thanks a lots…. It really help me to understand.

  5. May I just say what a relief to find a person that
    really understands what they are discussing online. You actually know
    how to bring a problem to light and make it important.
    A loot more people should loopk at this and understand this side of the
    story. I was surprised that you aren’t more popular given that you
    most certainly have the gift.

Leave a comment