Cascading Style Sheets/CSS Menus
From WikiKnowledge
Using only CSS it is possible to turn a simple list into a pop-up menu. Here is the HTML code that we will start with. It is a standard nested list which has been enclosed in a surrounding div which has been given an id of "menu".
<div id="menu">
<ul>
<li><a href="#">Item 1</a>
<ul>
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 2</a></li>
<li><a href="#">Item 3</a></li>
</ul>
</li>
<li><a href="#">Item 2</a>
<ul>
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 2</a></li>
<li><a href="#">Item 3</a></li>
</ul>
</li>
</ul>
</div>
The first thing to do is to zero out all the default margins and padding on the list. This is simply done using this CSS code:
#menu * {
margin: 0;
padding: 0;
}
To make it easier to see what is happening we will add a background color the the surrounding div. In this example we will use a simple sky blue color. This is done using:
#menu {
background-color: skyblue;
}
The next step is to hide the lists which appear inside the outer list. Here is the HTML code shown again with the lists we want to keep hidden shown in red.
<div id="menu">
<ul>
<li><a href="#">Item 1</a>
<ul>
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 2</a></li>
<li><a href="#">Item 3</a></li>
</ul>
</li>
<li><a href="#">Item 2</a>
<ul>
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 2</a></li>
<li><a href="#">Item 3</a></li>
</ul>
</li>
</ul>
</div>
To hide these lists requires only very simple CSS:
#menu ul ul {
display: none;
}
The above code will hide any unordered list, which is inside another unordered list, which is inside something with an ID of "menu". That way we can still see the outside list while hiding the inside lists until we want them to be shown.
Because the menu is going to a horizontal menu we now need to get the items in the list to stack up horizontally. While we are at it we will also remove the bulletpoints from the list and add some padding to the left and right hand sides.
#menu li {
float: left;
list-style: none;
padding: 0 0.5em;
}
If you look at the page now you may notice that the sky blue color has disappeared. This is because now that the list items are floated the div has no content and so it snaps shut. The easiest way to fix this is to simply float the div also. So find the CSS code for the div and fill in the red parts. The width is needed to make the div fill the width of the screen.
#menu {
background-color: skyblue;
float: left;
width: 100%;
}
Now to get the menu to work. You need to show the unordered list that is inside a list item tag (<li>) which is being hovered over with the mouse. We will also set it's position to absolute so that when the menu is displayed, it doesn't make the div bigger with it. This is accomplished with the following code:
#menu li:hover ul {
display: block;
position: absolute;
}
Now the basics of the menu have been done it's time to make the submenu stack up vertically so that it looks more like a traditional menu. This is done by setting the width of the submenu lists to any value. In this example it is set to 5em, then making its list items 100% of that width. There is also a border added around the submenu so that you can see it better and the background color is set to white so items behind the menu don't show through. Here is the code:
#menu ul ul{
width: 5em;
border: 1px solid blue;
background-color: white;
}
#menu ul ul li{
width: 100%;
}
And that's all that is needed to make a simple popup menu using only HTML and CSS. Note however that this menu will not work in Internet Explorer 6 and that browser will only recognize the :hover on links.
[edit] Complete Code
This is the complete HTML and CSS code used to make the menu. Note that the menus will not work in Internet Explorer 6.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>CSS MENU EXAMPLE</title>
<style>
#menu *{
margin: 0;
padding: 0;
}
#menu {
background-color: skyblue;
float: left;
width: 100%;
}
#menu ul ul{
display: none;
}
#menu li{
float: left;
list-style: none;
padding: 0 0.5em;
}
#menu li:hover ul{
display: block;
position: absolute;
}
#menu ul ul{
width: 5em;
border: 1px solid blue;
background-color: white;
}
#menu ul ul li{
width: 100%;
}
</style>
</head>
<body>
<div id="menu">
<ul>
<li><a href="#">Item 1</a>
<ul>
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 2</a></li>
<li><a href="#">Item 3</a></li>
</ul>
</li>
<li><a href="#">Item 2</a>
<ul>
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 2</a></li>
<li><a href="#">Item 3</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>
