Tutorial Dropdown Menu with Lists and CSS

UndeadDragon

Super Moderator
Staff member
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):

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:
without_css.jpg
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;
}
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:
HTML:
#menu li ul {
	position: absolute;
	display: none;
	/*Align with the left side of the other menu item*/
	left: -30px;
	top: 60px;
}
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:
HTML:
#menu li:hover ul {
	display: block;
}
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:
with_css.jpg
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/
 

UndeadDragon

Super Moderator
Staff member
Awesome! I've always thought that a such thing would require JavaScript.
I did too, until recently. So, I thought I would share this little trick for all :)
 

Miz

Administrator
There are a lot of things you can do in CSS that can make your life a lot easier that people just don't seem to know about. This HTML/CSS dropdown is beautifully designed, even people who have advance CSS knowledge will probably use it just because they can also be lazy :p.

The nice part about this, is that even though it lacks animations that a Dropdown in JQuery would have, it does practically the same thing as a regular Javascript dropdown would do. Except now the Dropdown works in almost all modern browsers, and works regardless of someone has their JS off or on. Much less hassle too...

Wonderful Tutorial.
I moved it to the Resource Forum.
 
General chit-chat
Help Users
  • No one is chatting at the moment.
  • The Helper The Helper:
    I am not complaining though Hurricanes are not fun I have been through alot of them
  • Blackveiled Blackveiled:
    I evacuated for it just incase since I live in La Porte pretty much right on the water (in Houston area). Didn't see anything. It's a good thing for me anyways.
  • Ghan Ghan:
    It's too bad that Blizzard messed up so terribly with Reforged.
  • Ghan Ghan:
    Still has a 0.6 user metacritic score.
  • Ghan Ghan:
    (Out of 10)
  • Varine Varine:
    I haven't even tried it yet because everyone said it sucked. How do you get .6 out of ten?
  • The Helper The Helper:
    I am waiting for Dwarf Fortress to come out on Steam then I am on it.
  • Accname Accname:
    I play Dwarf Fortress from time to time.
  • Accname Accname:
    Its Okay.
  • Accname Accname:
    But the performance is sub-par. Does not seem to be well optimized.
  • Varine Varine:
    Is the Steam version coming with a graphical overlay or is it using the ASCII graphics still?
  • tom_mai78101 tom_mai78101:
    Steam version has the graphical overlay.
  • The Helper The Helper:
    Steam Version has graphics, a new interface and will be integrated in the steam mod stuff
  • Blackveiled Blackveiled:
    I didn't think WC3 Reforged was that bad. It pretty much did what it stated (to me at least), but then again I can care less about reforged campaigns and all that. I just care about gameplay.
  • Varine Varine:
    I think people were hoping for a resurgence in mod support. I have little interest in the actual game tbh
  • Varine Varine:
    Plus I know they added that Dota precedent clause where Blizzard can steal your shit which isn't cool.
  • Ghan Ghan:
    They sold Reforged to the community as primarily a huge graphical uplift with high res textures and redone cinematics.
  • Ghan Ghan:
    They even showed one of the redone cinematics at Blizzcon and that very cinematic wasn't even in the released game.
  • Ghan Ghan:
    So I think folks were angry about that.
  • Varine Varine:
    Didn't the backwards compatability have issues too?
  • Accname Accname:
    I never had any hopes for that. Blizzard is not the same company it was 10 years ago.
  • The Helper The Helper:
    It happens in corporations. They just absorb the companies they buy and it is not about the love of making awesome games it is how much money can we make with the least amount of cost.
  • The Helper The Helper:
    Blizzard is watered down now hopefully they can pull it together
  • The Helper The Helper:
    they got a server engineer job opening :)

    Members online

    No members online now.

    Affiliates

    Hive Workshop
    Top