Tutorial Dropdown Menu with Lists and CSS

Discussion in 'Webmaster Tutorials and Resources' started by UndeadDragon, Jul 21, 2011.

  1. UndeadDragon

    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/
    • Like Like x 2
  2. GetTriggerUnit-

    GetTriggerUnit- DogEntrepreneur

    Awesome! I've always thought that a such thing would require JavaScript.
  3. UndeadDragon

    UndeadDragon Super Moderator Staff Member

    I did too, until recently. So, I thought I would share this little trick for all :)
  4. GetTriggerUnit-

    GetTriggerUnit- DogEntrepreneur

    But when you think of it, the solution is quite easy. Just had to think of it. :)
  5. Miz

    Miz Administrator Staff Member

    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.

Share This Page