Create a drop down menu in navigation
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 posted this at 13:53 — 8th November 2006.
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
Megan
Connect with us on Facebook!
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.