Dropdown Menus Using CSS

Skill Level: Intermediate

Christian Wilson wrote in with a request this week which I would like to share here (thanks Christian!).

Christian Writes:

How do you make a pull down navigation menu that is all in CSS?

As I said before, this is not a beginners task and might not even be an intermediate one, but I will throw down on it and you can pluck from this what you will.

First challenge I had in answering this question is that it doesn’t lend itself well to the whole "video" thing, so I am going to publish an article, right here in the video section to get you going while I try to think of a way to make this into a video.

There are two methods to adding a navigation bar across the top of a web page. One uses Javascript and "events" to launch an action, and the other relies on the cascading nature of style sheets to define rules that are applied from the top down.

First, the goal… Here’s a sample from my other video site (which uses the CSS to build pull down menu’s). Those of you who visited my original site will remember that the Category "link" had a drop down menu. Since this wasn’t a "blog", I had some freedom in what I did. Here’s a screen shot showing the drop down under the "Category" link in my top navigation bar.

The HTML is pretty straight forward as you can see from below. It just uses nested unordered lists. It’s the CSS that makes it all work.

Please Note: In order to display the actual code (and not have it BUILD the lists), I had to use an image of a screen capture. Here is a text file that contains both the navigation and the CSS.

I told you it was straight forward! In fact, you have seen this many times before. Want proof? Here is that exact same HTML but because this blog doesn’t share that style sheet, well, you can see the difference. Please note: Since it is the exact same HTML, none of these links will work!

• Home
• Categories
  • Social Networking
  • Blogging
  • Tech Stuff
  • Nussentials
  • Email Clients
  • List All Videos
• Request Video
• About Me
• Articles
• Get Updates
• Blog

Now that we have the HTML written and know our goal, let’s get busy with the CSS. If you aren’t interested in HOW it works, just download the sample file from the link shown above and copy and paste into your web page. Play around. Just keep the sample file separate in case you need to start over.

We will use this section for the discussion so you might consider printing this part out.


/* NAV - top horizontal nav */
#nav,
#nav ul {
padding: 0;
margin: 0;
list-style: none
}
#nav {
font-weight:bold;
height:2.09em;
font: bold 96% arial;
margin: 0 105px 0 40px;
}
#nav li {
position:relative;
background: #999;
float: left;
width: 10em;
display:block;
margin: 0;
border-bottom: 3px solid #666;
border-right: 3px solid #252525;
padding:0
}
#nav a,
#nav a:link,
#nav a:visited,
#nav a:hover,
#nav a:active {
text-decoration:none;
cursor:pointer;
color:#fff;
display: block;
padding: 4px 10px 2px;
}
#nav a:hover {
color:#000
}
#nav li ul {
border-left: 1px solid #c00;
background: #f6f6f6 url("images/featurebox_bg.gif") no-repeat 100% 100%;
width:15.8em;
font-size:90%;
margin-top:3px;
position: absolute;
font-weight:normal;
left: -999em
}
#nav li:hover ul,
#nav li.sfhover ul {
left: 0;
z-index:99999
}
#nav li li {
background:none;
float:none;
border:none;
border: 1px solid #999;
border-top:1px solid #fff;
border-right:none;
border-left:none;
padding-left:0
}
#nav li li.last {
border-bottom:none
}
#nav li li a,
#nav li li a:link,
#nav li li a:visited,
#nav li li a:hover {
color:#000;
padding: 3px 10px 2px;
width:14em;
}
#nav li li a:hover {
color:#fff;
background:#c00;
}
#nav li.active {
background: #c00;
border-bottom: 3px solid #c00
}
#nav li.active ul {
border:none;
background: #c00 url("images/featurebox2_bg.gif") no-repeat 100% 100%
}
#nav li.active a:link,
#nav li.active a:visited,
#nav li.active a:hover,
#nav li.active a:active {
}
#nav li.active a:hover {
color:#000
}
#nav li.active li {
border:none;
border-top: 1px solid #c15c5c;
border-bottom: 1px solid #870000
}
#nav li.active li.last {
border-bottom: none
}
#nav li.active li a:link,
#nav li.active li a:visited,
#nav li.active li a:hover,
#nav li.active li a:active {
color:#fff
}
#nav li.active li a:hover {
background: #666 url("images/sprites.gif") repeat-x 0 99%;
color:#fff
}
#nav li.active li.active a:link,
#nav li.active li.active a:visited,
#nav li.active li.active a:hover,
#nav li.active li.active a:active {
color:#fff;
font-weight:bold;
background: #666 url("images/sprites.gif") repeat-x 0 99%
}
/* hide from IE mac \*/
#nav li {
width:auto
}
/* end hiding from IE5 mac */


Wow, that’s a mouthfull, huh?

Okay, direct your attention to the very first bit, that defines the overall style for the entire navigation bar:

#nav,
#nav ul {
padding: 0;
margin: 0;
list-style: none
}


This set’s the stage for the CSS to work by defining the list-style initially as none. Subsequent tags will override this default. After this section is just a rule for the font weight, size and height of the background area. Pretty standard stuff.

The next rule really get’s busy enabling our drop down.


#nav li {
position:relative;
background: #999;
float: left;
width: 10em;
display:block;
margin: 0;
border-bottom: 3px solid #666;
border-right: 3px solid #252525;
padding:0
}


Notice that it’s position is relative and it floats left. This is the "category" link itself. It’s the very first "li" level. What makes the drop down work is the display:block command. This forces all the unordered list items into a "block" under the Category "link".

To be consistent, the next section defines display:block for the anchor tags as well.

The section that defines the li ul (the unordered list UNDER a list item within an unordered list), sets the position to absolute. That might seem counter intuitive but remember that position relates to the container it is in. Since the ul is within a li, within an ul, the position is relative to that item. (Whew, try saying that three times in a row).


#nav li ul {
border-left: 1px solid #c00;
background: #f6f6f6 url("images/featurebox_bg.gif") no-repeat 100% 100%;
width:15.8em;
font-size:90%;
margin-top:3px;
position: absolute;
font-weight:normal;
left: -999em
}


This rule also refines the background images (replace with your own or remove to just use color), and the default width of the "box" that drops down. (width:15.8em)

The rule that defines the li li section (shown below) turns the float off, and defines the borders.


#nav li li {
background:none;
float:none;
border:none;
border: 1px solid #999;
border-top:1px solid #fff;
border-right:none;
border-left:none;
padding-left:0
}


The rest of the CSS defines colors, font’s background and behaviors when links are hovered and are pretty standard.

My only other suggestion is to download the file, paste into your web page and CSS files and play with it. That’s what I did. I can’t remember the site I came across that used this, but I used the Web Developement add-on for FireFox to display the CSS (which I copied) and the page source (which I copied). I put them both into a "play" page and experimented. It only vaguely resembles the original page I found it on since I made it my own.

Christian, I hope this helps. Now, go play.

Update: Hey Christian,

Thanks for the question. First, you need to realize one thing about CSS and table-less formatting. Containers are everything.

Here’s what I mean.

With traditional tabled format, your table was the primary “object” that you placed content in. While it is pretty simple to do, it made for tougher “reading” when it came to your code. And everything had to fit inside.

With the new CSS method, you just need to build containers (div tags) and place your content there. So, to center your “body content”, created a tag called b_content (or something similar) and set the properties so that it has margins of “auto” and is the width you want.

Create a new tag for the navigation and float it left (ie: c_navigation) and set it’s width. So, div c_navigation is contained in b_content and floats to the left side of that container.

Most of my layout’s use something similar. A main container, and then two or three sub containers.

If this doesn’t answer your question, let me know and I will try to make a video about it, or go into more detail in an article or something.

(1 votes, average: 5 out of 5)

 Loading ...