Create a drop down menu in navigation

They have: 25 posts

Joined: Jan 2004

Hi,

I'd like to create a drop down menu as part of my current navigation.Example: Sports Articles would be the main page and clickable as a link.
Once you place mouse over the link called sports articles, a drop down sub menu would appear taking you to subcategories for that main link.

Listed below is my CSS coding for my navigation:

/******** TOP NAVIGATION *************/
#top_nav
{
border: 1px solid #336699;
border-left: none;
border-right: none;
background-color: #3fbf7f;
text-align: left;
font-size: 12px;
font-weight: bold;
padding: 0px;
margin: 0;
font-family: Verdana, arial, sans-serif;
}

#top_nav li
{
display: inline;
list-style-type: none;
padding: 0;
margin: 0;
}

#top_nav ul
{
padding-top: 4px;
padding-bottom: 4px;
margin: 0 0 0 0px;
}

ul#navlist
{
margin-left: 0;
padding-left: 0;
white-space: nowrap;
}

#navlist li
{
display: inline;
list-style-type: none;
}

#navlist a
{
padding-top: 4px;
padding-bottom: 4px;
padding-right: 10px;
padding-left: 10px;
}

#navlist a:link, #navlist a:visited
{
text-decoration: none;
color: #ffffff;
}

#navlist a:hover
{
color: #fff;
background-color: #2e68a2;
}

Here is my coding for the navigation itself:

Just not sure how to do a dop down menu for each link(on the nagivation bar) using ONLY CSS. I don't want javascripting being used.

Megan's picture

She has: 11,421 posts

Joined: Jun 1999

Look at the Control Panel link here on this site. It has a drop-down menu that uses only CSS. Check that code. I think I got it from A List Apart so you could try there.

Here's the CSS file for our control panel menu:

http://www.webmaster-forums.net/images/twf_classic_35/userCP.css

Want to join the discussion? Create an account or log in if you already have one. Joining is fast, free and painless! We’ll even whisk you back here when you’ve finished.