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.
  • Ghan Ghan:
    Chat should show on the sidebar when not logged in now.
  • Ghan Ghan:
    (You'll still need to log in to post messages)
  • Ghan Ghan:
    Test!
  • tom_mai78101 tom_mai78101:
    I must be in a test server.
  • tom_mai78101 tom_mai78101:
    Nice, Twitter tweets embedding now works
  • Wizard Wizard:
    Yup.
  • Ghan Ghan:
    Excellent.
  • Ghan Ghan:
    @tom_mai78101 Hello there.
  • Ghan Ghan:
    Tagging works in the chat too.
  • tom_mai78101 tom_mai78101:
    @Ghan Missed it.
  • Wizard Wizard:
    Still fixing things here and there. Added widgets to the portal, will make it match the ones here on the forum index tomorrow.
  • Ghan Ghan:
    The venerable World Editor Tutorials site has been converted to HTTPS at last.
  • jonas jonas:
    cool
  • jonas jonas:
    and I can even edit my messages, nice
  • seph ir oth seph ir oth:
    GENERAL CHIT CHAT, YOU ARE A BOLD ONE
  • Ghan Ghan:
    Hello there
  • The Helper The Helper:
    this new chatbox is great and the forum software update is great too
    +1
  • The Helper The Helper:
    upgrade has fixed forum registration spam problem
  • tom_mai78101 tom_mai78101:
    Something tells me we might be able to customize the chatbox a bit, considering that there's a gap under every message.
  • Wizard Wizard:
    Going to deploy a fix soon, just had to take some time for myself this weekend.
  • Varine Varine:
    Unbelievable. Time for yourself? How dare you!
  • Wizard Wizard:
    xD
  • tom_mai78101 tom_mai78101:
    Hm, it is now harder to type anything on an Android phone. Pressing Backspace or Enter keys will dismiss the Android keyboard for some reasons.

    Members online

    No members online now.

    Affiliates

    Hive Workshop
    Top