CSS Drop Down Menu – No JavaScript!

This time I’ll show you how to create your own drop down menu with XHTML and CSS, but with absolutely no Javascript! It’s all down to the CSS pseudo element :hover, which you have probably already used on anchor (<a>) tags. If you followed my previous tutorials on navigation bars you will definitely be familiar with it.

The difference being that this time we use it on elements within a definition list (i.e. <dl>, <dt>, and <dd> tags). These are quite similar to <ul> and <li> tags, which again following the previous tutorials would help you in getting used to using them.

For an example, click here and see how it works. And as always, you’re free to download it and change the code to suit your own web site.


Also, I’ve posted the code below so you can see what’s involved without having to navigate away from the page. I’ve just put all of the code from the example page in one box and won’t explain it as it should be straight-forward enough. Pay particular attention to line 21 as that’s the line where the magic happens.

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
63
64
65
66
<style type="text/css">
div{
	width:600px;
	height:1em;
}
dl, dt, dd{
	margin:0;
	padding:0;
}
dl{
	position:absolute;
}
dt{
	width:100px;
	border:3px solid #555;
}
dd{
	display:none;
}
dl:hover dd{
	display:block;
}
a{
	display:block;
	background-color:#eee;
	color:#000;
}
a:hover{
	background-color:#fb0;
}
dt a{
	padding-left:4px;
}
dd a{
	border:1px solid #555;
	padding:4px 8px;
}
p{
	width:500px;
}
</style>
<div>
    <dl style="left:6px;">
        <dt><a href="#set-1">Set 1</a></dt>
        <dd><a href="#link-1">Link 1</a></dd>
        <dd><a href="#link-2">Link 2</a></dd>
    </dl>
    <dl style="left:112px;">
        <dt><a href="#set-2">Set 2</a></dt>
        <dd><a href="#link-3">Link 3</a></dd>
        <dd><a href="#link-4">Link 4</a></dd>
    </dl>
    <dl style="left:218px;">
        <dt><a href="#set-3">Set 3</a></dt>
        <dd><a href="#link-5">Link 5</a></dd>
        <dd><a href="#link-6">Link 6</a></dd>
    </dl>
    <dl style="left:324px;">
        <dt><a href="#set-4">Set 4</a></dt>
        <dd><a href="#link-7">Link 7</a></dd>
        <dd><a href="#link-8">Link 8</a></dd>
    </dl>
</div>
<p>
In publishing and graphic design, lorem ipsum is the name given to commonly used placeholder text to demonstrate the graphic elements of a document or visual presentation, such as font, typography, and layout. Substituting this dummy text for meaningful content should not be confused with &quot;greeking&quot;.
</p>

Enjoy messing around with it :)


2 thoughts on “CSS Drop Down Menu – No JavaScript!

Comments are closed.