dslreports logo
site
 
    All Forums Hot Topics Gallery
spc

spacer




how-to block ads


Search Topic:
uniqs
1012
share rss forum feed


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]



cdru
Go Colts
Premium,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