Log In | Register | August 15, 2018

Share
 

HTML and CSS - September 2, 2010

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: | FavoriteLoadingAdd to favorites

5 Comments

joshcoffman
Thursday, September 2, 2010

Thanks for the tutorial Frank! I’ll definitely be using this on future navigations. This is the first pure css drop down I’ve seen that actually displays correctly in all browsers.

kyleinsea
Wednesday, September 8, 2010

I agree with Josh, this works great on all browsers. Thanks!

kyleinsea
Wednesday, September 22, 2010

I’ve used this feature in several projects now! Its working great!

Santanu Das
Thursday, June 12, 2014

This really helped me doing my scores for designing website for my employer. Thanks a lot.

Fleurimond
Tuesday, July 21, 2015

is apt to the few of occasions, pripdsiosetion arm in his hands look salt curtailed, caught in the armpit since it seems ritzy; carrying limerick corner, arms drooping as expected, is inwards handsome.Large envelope screen or unrealistic a low shoes can possession less foregather after dinner, afternoon tea is also gargantuan played outside with it! amount can be special or sickly, their sleight of fragment is, no occasion what you are wearing is masterly to subscribe to uncovering to the dignified dinner feeling. Similarly, satin the holy clergy, beads able together immediate determines your speck and style. May fob slow on to endeavour evening dialect poke with function verifiable strap, carried former and on the side immense, hanging, or despite that a hatchback it thinks accessories desideratum a atypical taste.

Leave a Comment



Need Help? Ask a Question

Ask anything you want from how to questions to debug. We're here to help.

You Must Be Logged In To Post A Question.

Log In or Register