 Stealth
join:2005-05-20
San Diego, CA | CSS Navigation Drop Down Bar Help Needed (External CSS) Hello, I'm in need of help create a css drop down navigation bar. I have the code work, but when I try to as a sub catagory its changes the bar.
What I'm trying to do is for example lets say you have:
Home --- About me --- Services --- Prices --- Contact me
I would like to have it so under Services you will have drop down. Tune up, brake job, carb cleaning
css page
#navcontainer ul {
margin: 0;
padding: 0;
list-style-type: none;
text-align: center;
}
#navcontainer ul li {
display: inline;
}
#navcontainer ul li a {
text-decoration: none;
padding: .2em 1em;
color: #fff;
background-color: #036;
}
#navcontainer ul li a:hover {
color: #fff;
background-color: #369;
}
HTML PAGE
[blockquote]
[html]
[head]
[link rel="stylesheet" type="text/css" href="css.css" /]
[/head]
[body]
[div id="navcontainer"]
[ul]
[ul]
[li][a href="/"]Home[/a][/li]
[li][a href="/gallery/XXXXXXX_YYYYY"]About Me[/a][/li]
[li][a href="/galleries"]Galleries[/a][/li]
[li][a href="/gallery/XXXXXXX_YYYYY"]Services[/a][/li]
[li][a href="/gallery/XXXXXXX_YYYYY"]Price[/a][/li]
[li][a href="/gallery/XXXXXXX_YYYYY"]Contact Me[/a][/li]
[/ul]
|
|
 cdruGo ColtsPremium,MVM
join:2003-05-14
Fort Wayne, IN
kudos:7 | The most common way is to have the drop downs as nested <ul>s and <li>s within the individual top nav's <li> elements. Set "display:none;" for the nested <ul>, then add a CSS rule for "li:hover ul" that changes things back to "display:block;".
If you need more help, I'd recommend creating a jsFiddle or at least a sample page and not just snippets of HTML. |
|
Stealth
join:2005-05-20
San Diego, CA
1 edit | reply to Stealth
Yiu can see how the nav bar look live at
»nobleambiencephotography.com
Under Models there should be: Face shots, Glamour, Lingerie/Boudoir
Thanks |
|
