UndeadDragon
Super Moderator
- Reaction score
- 447
Creating a dropdown menu with lists and CSS
A lot of people still think that a dropdown menu needs to use JavaScript to be able to show/hide it, whereas with this simple technique, you only need to use a small bit of css, mixed with lists.
The HTML
Firstly, let’s take a look at the HTML (Note it is not fully valid, it’s just for the purpose of looking at the structure of the list):
The menu structure is basically done by nesting another inside a list item on the main menu.
There is not too much to explain on the HTML, as it’s nice and simple. As long as you have basic knowledge of lists in HTML, you should have no problem with understanding it.
This is what it should look like before the CSS:
Click the image to enlarge it.
The CSS
Again, as with the HTML, the CSS is not difficult. All it takes is a little bit of knowledge of the hover pseudo-event.
I shall show you the CSS and then go through the code:
There are only a few pieces of that code which are needed 100% to make this work. The first one is:
This snippet ensures that the menu will display in a linear format, rather than the standard list format. It also ensures that the absolute positioning will work correctly, with the use of position:relative.
The next necessary piece is:
All this does is make the sub-menu appear below the main menu, however it also hides it, so you cannot see it by default. The left and top positioning are there to ensure the sub-menu appears at the right place. It will require configuring if you change anything like padding or margins on the menu.
The last bit which is necessary is:
Nice and easy, it just displays the child ul of the li which is hovered over, by using “li:hover ul”.
After all the CSS is in, it should look something like this:
Click the image to enlarge it.
Thanks for reading, you can see a working example of this exact code here: http://labs.omega-designs.com/thehelper/ddwl/
A lot of people still think that a dropdown menu needs to use JavaScript to be able to show/hide it, whereas with this simple technique, you only need to use a small bit of css, mixed with lists.
The HTML
Firstly, let’s take a look at the HTML (Note it is not fully valid, it’s just for the purpose of looking at the structure of the list):
HTML:
<html>
<head>
<title>Dropdown with lists</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<ul id="menu">
<li><a href="#nogo">Menu Item 1</a></li>
<li><a href="#nogo">Menu Item 2</a></li>
<li><a href="#nogo">Menu Item 3</a>
<ul><li><a href="#nogo">Sub Item 1</a></li><li><a href="#nogo">Sub Item 2</a></li><li><a href="#nogo">Sub Item 3</a></li></ul></li>
<li><a href="#nogo">Menu Item 4</a></li>
<li><a href="#nogo">Menu Item 5</a></li>
</ul>
</body>
</html>The menu structure is basically done by nesting another inside a list item on the main menu.
There is not too much to explain on the HTML, as it’s nice and simple. As long as you have basic knowledge of lists in HTML, you should have no problem with understanding it.
This is what it should look like before the CSS:
Click the image to enlarge it.
The CSS
Again, as with the HTML, the CSS is not difficult. All it takes is a little bit of knowledge of the hover pseudo-event.
I shall show you the CSS and then go through the code:
HTML:
/*Global Settings*/
body {
margin: 0;
padding: 0;
font-family: Arial, Verdana, Geneva;
}
#menu a {
color: #fff;
text-decoration: none;
}
/*The styling of each main menu item*/
#menu li {
display: block;
float: left;
position: relative;
padding: 20px;
background: #5d5d5d;
}
#menu li:hover {
background: #8d7cb5;
}
/*The styling of the sub menu*/
#menu li ul {
position: absolute;
display: none;
/*Align with the left side of the other menu item*/
left: -30px;
top: 60px;
}
/*The styling of each sub menu item*/
#menu li ul li {
background: #5d5d5d;
}
/*The thing which makes it work. Makes the sub menu appear
when hovering a main menu item*/
#menu li:hover ul {
display: block;
}There are only a few pieces of that code which are needed 100% to make this work. The first one is:
HTML:
#menu li {
display: block;
float: left;
position: relative;
}The next necessary piece is:
HTML:
#menu li ul {
position: absolute;
display: none;
/*Align with the left side of the other menu item*/
left: -30px;
top: 60px;
}The last bit which is necessary is:
HTML:
#menu li:hover ul {
display: block;
}After all the CSS is in, it should look something like this:
Click the image to enlarge it.
Thanks for reading, you can see a working example of this exact code here: http://labs.omega-designs.com/thehelper/ddwl/
