Creating a Pure CSS Drop Down Menu

Creating a fully functional drop down menu can be done easily using just CSS and HTML. To start off you will need to have an html document open and ready for you to insert your code. If you are using an external CSS document, make sure you have that open as well. For this tutorial we will be keeping our CSS and HTML on the same page.

Lets start by creating a simple list. We will start by enclosing our list within a div tag.

<div id=”navigation”></div>

Notice we assigned the div a special identifier in order for us to use it with our CSS styles. Within the div lets create a standard unordered list with sample links.

<div id=”navigation”>
<ul>
<li><a href=”#”>Link 1</a></li>
<li><a href=”#”>Link 2</a></li>
<li><a href=”#”>Link 3</a></li>
<li><a href=”#”>Link 4</a></li>
<li><a href=”#”>Link 5</a></li>
</ul>
</div>

So far you should have a div with a simple unordered list, nothing to crazy. Next we want embed another unordered list within the second list item.

<div id=”navigation”>
<ul>
<li><a href=”#”>Link 1</a></li>
<li><a href=”#”>Link 2</a>
<ul>
<li><a href=”#”>Sub Link 1</a></li>
<li><a href=”#”>Sub Link 2</a></li>
<li><a href=”#”>Sub Link 3</a></li>
<li><a href=”#”>Sub Link 4</a></li>
<li><a href=”#”>Sub Link 5</a></li>
</ul>
</li>
<li><a href=”#”>Link 3</a></li>
<li><a href=”#”>Link 4</a></li>
<li><a href=”#”>Link 5</a></li>
</ul>
</div>

*Note: You can embed the new list within any of the list items. This new list will be used as the drop down menu for the parent list item.

Now that we have the basic HTML markup for our CSS dropdown menu, we can then continue onto the CSS portion. If you are using an external style sheet, you will want to store all of the following styles in there. If not, you can embed the CSS within the same page as we do in this tutorial.

We start by creating the container for all of our CSS styles in our head of our document.

<style type=”text/css”>
</style>

*Note: Remember, we created a div with an id of navigation. We will need to reference that identifier now when creating the styles for the drop down menu.

Lets start by giving the main div #navigation a float.  We will also want to set the unordered lists and list elements to have a margin and padding of 0 by default.

<style type=”text/css”>
#navigation {
float: left;
}
#navigation ul, #navigation  ul li {
margin: 0;
padding: 0;
}
</style>

Setting up this portion will keep your drop down menu from having any unwanted spacing. After setting up the base we want to start off by defining some styles for our main unordered list, as well as our embedded unordered list.

We’ll start by setting a float to just the main unordered list not the interior. The way you do that is by pointing to the ul from your div by using the following.

#navigation > ul {
float: left;
}

Using the pointer will insure that you only affect the ul objects directly within the div #navigation and not the ul’s within the li elements.

So now with that set, lets just setup some basic styles to our a tags within the main navigation not the interior yet.

#navigation > ul {
float: left;
}
#navigation > ul > li {
float: left;
list-style: none;
position: relative;
}
#navigation > ul > li > a {
float: left;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: white;
padding: 5px 10px;
text-align: center;
text-decoration: none;
background-color: blue;
}

You will notice that on the #navigation > ul > li part I added a position: relative; attribute. This is because we setup each li to be the container for our embedded lists. The embedded lists will use absolute positioning to make sure we get it to land in the correct spots.

Now lets setup some styles for the inner lists. You will see that I’m using the pointers throughout my CSS. This is because I want to directly set styles to certain elements without affecting the others. So now lets create some styles for the embedded lists.

#navigation > ul > li > ul {
position: absolute;
top: 24px;
left: 0;
display: none;
}
#navigation > ul > li:hover > ul {
display: block;
}
#navigation > ul > li:hover > a {
background-color: darkblue;
}
#navigation > ul > li > ul > li {
list-style: none;
}
#navigation > ul > li > ul > li > a {
width: 100px;
float: left;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: white;
padding: 5px 10px;
text-align: left;
text-decoration: none;
background-color: blue;
border-top: 1px solid #fff;
}
#navigation > ul > li > ul > li > a:hover {
background-color: darkblue;
}

You will notice that the style for #navigation > ul > li > ul is setting the embedded lists to display: none; which will cause the embedded list to not show at all to the browser. We also set the embedded ul to have an absolute positioning of top: 24px and left of 0px;. This part controls the positioning of the embedded unordered list. The positioning will insure that the embedded list will start from the beginning of the parent list element and 24 pixels from the top of it.

To get the list to show on hover, we added a display:block; to the #navigation > ul > li:hover > ul. Notice the :hover on the li element. This will let the browser know that when you hover over the li element to display the embedded ul. All the other CSS attributes are just for styling the drop down to give it background colors and some style.

With this said, you should be able to build a pure CSS and HTML drop down menu without having to rely on JavaScript. You can also use the same ideas mentioned in this tutorials to create more levels within the drop down.

Below is the code for everything we covered. Have Fun!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
#navigation {
float: left;
}
#navigation ul, #navigation ul li {
margin: 0;
padding: 0;
}
#navigation > ul {
float: left;
}
#navigation > ul > li {
float: left;
list-style: none;
position: relative;
}
#navigation > ul > li > a {
float: left;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: white;
padding: 5px 10px;
text-align: center;
text-decoration: none;
background-color: blue;
}
#navigation > ul > li > ul {
position: absolute;
top: 24px;
left: 0;
display: none;
}
#navigation > ul > li:hover > ul {
display: block;
}
#navigation > ul > li:hover > a {
background-color: darkblue;
}
#navigation > ul > li > ul > li {
list-style: none;
}
#navigation > ul > li > ul > li > a {
width: 100px;
float: left;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: white;
padding: 5px 10px;
text-align: left;
text-decoration: none;
background-color: blue;
border-top: 1px solid #fff;
}
#navigation > ul > li > ul > li > a:hover {
background-color: darkblue;
}
</style>
</head>
<body>
<div id="navigation">
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a>
<ul>
<li><a href="#">Sub Link 1</a></li>
<li><a href="#">Sub Link 2</a></li>
<li><a href="#">Sub Link 3</a></li>
<li><a href="#">Sub Link 4</a></li>
<li><a href="#">Sub Link 5</a></li>
</ul>
</li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a>
<ul>
<li><a href="#">Sub Link 1</a></li>
<li><a href="#">Sub Link 2</a></li>
<li><a href="#">Sub Link 3</a></li>
</ul>
</li>
<li><a href="#">Link 5</a></li>
</ul>
</div>
</body>
</html>

Post By: Frank Perez | Add to favorites