Today, I’ll continue on a topic I wrote about some time ago. A CSS menu. This time we will build a vertical CSS menu with rollover submenu’s. This menu will be written in CSS and HTML, and will use a so-called ‘behavior’ file. What are we going to produce? The menu I’ve made can be found as an example and as .rar file to download below.

Vertical CSS menu – Download
Vertical CSS menu – Example

Horizontal Menu

You might be interesting the horizontal version too, I have wrote an article about that. Read it here.

We start with the structure

To give you a better idea of the structure we’ll use, I’ve made a little image explaining this. We start with an <ul> tag (blue). Inside this tag, we’ll add an <li> tag (pink) to display the menu items. The submenu has the same structure as the orginal menu. It is a menu in a menu. You can see what’s going on in the picture; we’ll add another <ul> tag (green) with < li> tags (orange) inside the pink tag.

To explain it some more; look below. The menu structure will look like this in your browser. I colored the items the way I did in the structure picture so you recognize what codes displays what.

I hope this part is clear now. Next are the HTML codes:

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

<ul>
	<li><a href="#">Home</a></li>
	<li><a href="#">Services</a>
<ul>
	<li><a href="#">Webdesign</a></li>
	<li><a href="#">Development</a></li>
	<li><a href="#">Illustration</a></li>
	<li><a href="#">Search engine</a></li>
	<li><a href="#">WordPress</a></li>
</ul>
</li>
	<li><a href="#">Blog</a>
<ul>
	<li><a href="#">Webdesign</a></li>
	<li><a href="#">Development</a></li>
</ul>
</li>
	<li><a href="#">Contact</a></li>
</ul>

Behavior .htc file

In CSS, you can add the :hover pseudo-class to many elements. Most modern browsers support this technique already, except the biggest one; Microsoft’s Internet Explorer. IE only supports :hover pseudo-classes on the tag. The menu we are going to built has to work in IE as well. How to do this? With a behavior file. With this file we are able to add extra functions to your CSS properties, which won’t work in other browsers than Internet Explorer. This way, the ability to script that :hover function does exist! I’m not scripting my own behavior file, because it’s written in Javascript, a language I’ve never looked into. The file we are going to use can be found here; Behavior file.

And now the CSS

First, we add the behavior file to your CSS file. This .htc file only has to load one time, so we’ll place it in an element that loads just one time. Like this:

1

body { behavior:url("csshover.htc"); }

Our CSS menu will require some ‘core’ codes. These codes are needed to let the menu work the way we want it to. There are a lot things you could change to let it fit your requirements. Margin between the items, background or text colors, whatever. To let our menu work, use the codes below:

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

ul {
list-style: none; /* Remove the bullets */
margin: 0;
padding: 0;
width:200px; /* Menu width */
}
ul li {
display: block; /* Make a menu item a block (height 100%, width 100%) */
height:100%;
width:100%;
position: relative;
float:left; /* Make sure (in IE) there is no margin between the menu items */
}
ul li a{
display:block; /* When rollover the menu item, the whole item will be seen as link. */
}

ul li a:hover {
padding:0;
}
ul ul {
position: absolute;
top: 0;
display:none; /* Display nothing when not 'hovered' */
}
ul li ul li{}
ul li ul li a:hover{}
ul li:hover ul{
display: block; /* Make sure the submenu is displayed as blocks as well. */
left:200px; /* Your menu width. The submenu appears there, when you hover a menu item. */ }

The problem for your Internet Explorer browser is this line of codes: ‘ul li:hover ul’. It will not display this part, because it doesn’t know what ‘li:hover’ means. To make sure IE does recognize it the way we want it to, we use our ‘behavior’ file.

We’re done

The menu works. I think this version is one of the most simple CSS menu’s around. But well, it doesn’t look great yet. I’ve made a example to show you how to give this menu some borders, background colors and hover styles. Try it yourself and you can post your menu in the comments! If you have a problem with this menu, my explanation or just want to ask me something, please leave me a comment or contact me directly. I hope you have enjoyed this article and keep on coming back! To make this more easy to modify this for you, I have included all the files in a .rar file and this file is available for download below!

Vertical CSS menu – Download
Vertical CSS menu – Example

LusterForever.com – Cool silver charms and leather bracelets design! Totally awesome sterling silver bracelets.