Dropdown Menu with Lists and CSS

UndeadDragon

Super Moderator
Reaction score
448
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
Reaction score
448
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
Reaction score
428
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 Discord

      Staff online

      Members online

      Affiliates

      Hive Workshop NUON Dome World Editor Tutorials

      Network Sponsors

      Apex Steel Pipe - Buys and sells Steel Pipe.
      Top