CSS – Drop Menus

Posted by Andrew, 3 months and 3 weeks ago.

Introduction

So we all like having tabs across the top of our websites, right? It keeps things organized and clutter free, but what happens when you want to add more navigation to those tabs without actually adding more tabs? Oh, that’s right, you can use drop menus to accomplish this task. This can be easily done using just CSS, sweet huh?

Requirements

Nothing is really required here, you just need to have a basic understanding of HTML and CSS.

The Process

Step 1
The first thing to do is create a list of elements that we would like to make into menus. For this, we will use un-ordered lists (UL). The main list element will be the tab’s name, and the child un-ordered list element will be the drop menu items.

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
   <title>CSS Drop Menu | I Am Web Dude Tutorials</title>
   <link rel="stylesheet" type="text/css" media="screen, tv, projection" href="./dropmenu.css" />
</head>
<body>
<ul>
   <li>
      Menu 1
      <ul>
         <li><a href="http://www.iamwebdude.com/">Item 1</a></li>
         <li><a href="http://www.iamwebdude.com/">Item 2</a></li>
         <li><a href="http://www.iamwebdude.com/">Item 3</a></li>
      </ul>
   </li>
   <li>
      Menu 2
      <ul>
         <li><a href="http://www.iamwebdude.com/">Item 1</a></li>
         <li><a href="http://www.iamwebdude.com/">Item 2</a></li>
         <li><a href="http://www.iamwebdude.com/">Item 3</a></li>
      </ul>
   </li>
</ul>
 
<p>Hover over a menu above to see it's contents.</p>
</body>
</html>

Here we have the basic structure of our HTML page. We have one main un-order list which contains two list elements, and each of those list elements contain a child un-ordered list. That’s all you have to do for the HTML! Easy, right?

Step 2
Now we need to create the CSS to control these drop menus. The first step is to hide the child un-ordered lists, and to accomplish this we do write the following in our CSS:

1
2
3

li ul {
   display: none
}

Step 3
Now how do you get that menu to display when you hover over the parent list element? Simple, you just use the :hover pseudo-selector.

1
2
3

li:hover ul {
   display: block
}

The reason we use the property display with the value of block is to make the child un-ordered list visible, and the pseudo-selector :hover means to fire this CSS rule when hovering over the parent list element.

Conclusion

That’s it! Wasn’t that easy? Now play around with the CSS and you could create something like this. Hope you enjoy this little trick and make use of it on future and/or current CSS projects!

CSS

Community Thoughts

MATT

Nice, quick and very efficient technique!

3 months and 3 weeks ago MATT

Andrew

@MATT – Thank you, hope this method works out to your advantage.

3 months and 3 weeks ago Andrew

shahz

Nice one dude..Well, either we use display, or use top:-100px; and top:10px; on hover..Its the power of CSS :)

3 months and 3 weeks ago shahz

Repulse

wow, I just had one made with javascript.. i always needed JS for this :D will definatly try out (and convert) to this method !

3 months and 3 weeks ago Repulse

Andrew

@shahz @Repulse – I’m glad you guys like the tutorial, look forward to more nifty CSS tutorials in the future :)

3 months and 3 weeks ago Andrew

Scott (Vanquish)

Very nice tutorial dude and will help me alot.
Currently trying to learn to code CSS so Im sure it will come in handy at some point when Im trying to code a website or whatever.

2 months and 4 weeks ago Scott (Vanquish)

What are your thoughts?