NavBar drop-down menu

[Firemann]

I would like to have a drop down menu appear from the Photo Galleries link. What I want is for the drop down menu to have my main categories that my galleries fall into: portraits, sports, events, & boudior. Then clicking on those drop-down choices would go straight to those categories. So...how do I do that? Previous attempts have been disasterous, so I've gotten everything back to normal.

Thanks!

OOPS. Forgot, my website is www.lonestar-photography.com

[Allen]

I would like to have a drop down menu appear from the Photo Galleries link. What I want is for the drop down menu to have my main categories that my galleries fall into: portraits, sports, events, & boudior. Then clicking on those drop-down choices would go straight to those categories. So...how do I do that? Previous attempts have been disasterous, so I've gotten everything back to normal.

Thanks!

OOPS. Forgot, my website is www.lonestar-photography.com (http://www.lonestar-photography.com)
Here ya go. See here (http://allen-steve.smugmug.com/gallery/2327835), here (http://allen-steve.smugmug.com/gallery/2011077) and here (http://allen-steve.smugmug.com/gallery/2078255) for reference.
Replace your whole header with this.

<div id="my_banner"> </div>

<div class="menu">
<ul>
<li><a href="/">Home</a></li>
<li><a href="/gallery/7251982_DNgJF">About Us</a></li>
<li><a class="drop" href="/galleries">Photo Galleries
<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="/Events">Events</a></li>
<li><a href="/Sports">Sports</a></li>
<li><a href="/Portraits">Portraits</a></li>
<li><a href="/Boudior">Boudior</a></li>
</ul> <!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="/gallery/7272886_utoYE">Contact Us</a></li>
<li><a href="/gallery/7248185_h6Lc4">Guestbook</a></li>
</ul> <!--[if lte IE 6]></td></tr></table></a><![endif]-->
</div>

Add this to your CSS

/* CSS Dropdown Nav Bar */
/* Original code by Stu Nicholls of */
/* http://www.cssplay.co.uk/ */
/* Edited by me for content, formatting and some elements */
/* Please help support CSSPlay at: */
/* http://www.cssplay.co.uk/support.html */

/* Common Styling */
.menu {
position: relative;
display: block;
z-index: 99;
padding: 20px 0px 30px 0px; /* spacing around menu - top right bottom left */
height: 20px; /* menu container (div .menu) */
width: 616px; /* width of menu - minimize this until doesn't wrap to two lines - too large effects centering */
margin: 0 auto; /* this should center navbar, if not tweak with left's below */
}

.menu ul {
padding: 10px 0px 10px 0px; /* this effects menu centering if too big */
margin:0 auto; /* this maybe not needed? */
list-style-type: none;
}

.menu ul li {
/* margin: 0 2px 0 2px; */ /* adds space between main menu boxes */
float:left; /* WARNING: float right reverses menu */
position:relative !important; /* ***** Carbonite fix ***** */
}

.menu ul li a,
.menu ul li a:visited {
display: block;
font-size: 1.5em; /* main buttons */
color: #d6b400; /* main buttons text non-hover*/
text-decoration:none;
text-align: center; /* centers text in buttons */
width: 120px; /* main box width */
height: 20px; /* main box height */
background: #000; /* main button color */
padding-left: 0px;
line-height: 20px; /* positions text up/down in box */
}


* html .menu ul li a, .menu ul li a:visited {
width: 120px; w\idth: 120px; /* IE main button */
}

.menu ul li ul {
display: none;}

/* */
/* Specific to Non-IE browsers */
/* */

.menu ul li:hover a {
color: #d6b400; /* main when hover DD */
background: #000; /* main when hover DD */
}

.menu ul li:hover ul {
display: block;
position: absolute !important; /* ***** Carbonite fix ***** */
top: -4px; /* FF DD up down */
margin-top: 17px; /* FF main mouse active vertical */
left: 0px; /* FF DD right left */
width: 104px; /* unknown */
}

.menu ul li:hover ul li ul {
display: none;
}

.menu ul li:hover ul li a {
display: block;
background: #000; /* DD FO non-hover */
color: #fff; /* DD FO non-hover */
height: auto;
line-height: 20px; /* DD FO box height */
padding: 0px 0px;
width: 120px; /* DD FO box width */
}

.menu ul li:hover ul li a:hover {
background: #000; /* DD FO hover */
color: #d6b400; /* DD FO hover */
}

.menu ul li:hover ul li:hover ul {
display: block;
position: absolute;
left: 102px; /* FF FO right left */
top: -27px; /* FF FO up down */
width: 146px; /* FF FO box width */
}

/* */
/* Specific to IE browsers */
/* */

.menu ul li a:hover {
/* text-decoration: none; */ /* might be needed */
color: #fff; /* main hover */
background: #000; /* main hover */
}

.menu ul li a:hover ul {
display: block;
position: absolute !important; /* ***** Carbonite fix ***** */
top: 2px; /* DD container up down */
background: none; /* gets rid of DD container */
margin-top: 7px; /* DD container up down */
left: 0px; /* DD right left */
}

.menu ul li a:hover ul li a {
display: block;
background: #000; /* IE DD color non-hover */
color: #d6b400; /* IE DD color non-hover */
height: auto;
line-height: 20px; /* IE DD FO box height */
padding: 0px;
width: 145px; /* IE DD FO box */
}

.menu ul li a:hover ul li a ul {
visibility:hidden;
position:absolute;
height: 0;
width: 0;
}

.menu ul li a:hover ul li a:hover {
background: #000; /* DD FO hover */
color: #fff; /* DD FO hover */
}

.menu ul li a:hover ul li a:hover ul {
display: block;
position: absolute;
top: -22px; /* FO up down */
color: #000000; /* unknown */
left: 147px; /* FO right left */
}

/*ADD TO FIX IE*/
/* a hack so that IE5.5 faulty box model is corrected */

* html .menu a, * html .menu a:visited {
width: 125px;
w\idth: 139px;
}

/* another hack for IE5.5 */

* html .menu ul ul {
top: 30px;
t\op: 31px; /* IE gap between main bar and the dropdown items */
}

/* style the table so that it takes no part in
the layout - required for IE to work */
.menu table {
position:absolute;
top:auto 0; left:0;
}

/* yet another hack for IE5.5 */

* html .menu ul ul a {
width: 125px; /* unknown */
w\idth: 104px; /* DD FF width */
}

/*END EXTRA ADDS FOR IE*/

/* ADD TO HIDE EXTRA LEVELS */
/* make the 2nd level visible when
hover on 1st level list OR link */
.menu ul a:hover ul, /* IE */
.menu ul:hover ul { /* FF */
visibility:visible;
}

/* keep the 3rd level hidden when you
hover on 1st level list OR link */
.menu ul a:hover ul ul, /* IE */
.menu ul:hover ul ul { /* FF */
visibility:hidden;
}

/* keep the 4th level hidden when you
hover on 2nd level list OR link */
.menu ul li a:hover ul li a:hover ul ul, /* IE */
.menu ul li:hover ul li:hover ul ul { /* FF */
visibility:hidden;
}

/* make the 3rd level visible when you hover
over 2nd level list OR link */
.menu ul a:hover ul a:hover ul, /* IE */
.menu ul:hover ul:hover ul { /* FF */
visibility:visible;
}

/* make the 4th level visible when you
hover over 3rd level list OR link */
.menu ul li a:hover ul li a:hover ul li a:hover ul, /* IE */
.menu ul li:hover ul li:hover ul li:hover ul { /* FF */
visibility:visible;
}

/* ==== END NAVBAR CODE ==== */

[Firemann]

Thanks very much for the codes. I was in the process of following the Steve Allen tutorial, but I really messed it up somewhere. However, in the course of trying it, I have decided I'd really like to have the flyouts. In sports I'd like lacrosse, swimming, and baseball to fly out to the right. In Portraits I'd like Individual Portraits, Family Portraits, Senior Portraits, and Boudior Portraits to fly out to the right. Any chance you can help with that?:bow

[Firemann]

Wow, I actually figured out the flyout menu's on my own:ivar

The only problem remaining is the font style I had on my Nav Bar changed. I had it set to Papyrus. Where does that font-family code stuff go and what should it be set to?

[Firemann]

Okay, I'm getting the hang of this. I changed my font-family. The only issue remaining is my main menu needs to be spread out wider under my header with more space in between the menu items. I've made some adjustments to different margins, but I'm not finding the right one.

Thanks for the help.

[Allen]

Okay, I'm getting the hang of this. I changed my font-family. The only issue remaining is my main menu needs to be spread out wider under my header with more space in between the menu items. I've made some adjustments to different margins, but I'm not finding the right one.

Thanks for the help.
Play with the widths in these, I creased each to 130 and main to 700 and seems to look ok.

.menu {
position: relative;
display: block;
z-index: 99;
padding: 20px 0px 30px 0px; /* spacing around menu - top right bottom left */
height: 20px; /* menu container (div .menu) */
width: 700px; /* width of menu - minimize this until doesn't wrap to two lines - too large effects centering */
margin: 0 auto; /* this should center navbar, if not tweak with left's below */
}

.menu ul li a,
.menu ul li a:visited {
display: block;
font-family: Papyrus, Comic Sans MS;
font-size: 1.5em; /* main buttons */
color: #d6b400; /* main buttons text non-hover*/
text-decoration:none;
text-align: center; /* centers text in buttons */
width: 130px; /* main box width */
height: 20px; /* main box height */
background: #000; /* main button color */
padding-left: 0px;
line-height: 20px; /* positions text up/down in box */
}


* html .menu ul li a, .menu ul li a:visited {
width: 130px; w\idth: 130px; /* IE main button */
}

[Firemann]

Thanks. That spread it out, but know it's not centered and the spacing between the menu items is not even. Where would I adjust the gap between the individual menu buttons?

[Allen]

Thanks. That spread it out, but know it's not centered and the spacing between the menu items is not even. Where would I adjust the gap between the individual menu buttons?
Before I get into the CSS. Change out your header with this. Fixes a couple missing IE closures.
</ul> <!--[if lte IE 6]></td></tr></table></a><![endif]-->

<div id="my_banner"> </div>

<div class="menu">
<ul>
<li><a href="/">Home</a></li>
<li><a href="/gallery/7251982_DNgJF">About Us</a></li>
<li><a class="drop" href="/galleries">Photo Galleries
<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="/Events">Events</a></li>
<li><a class="drop" href="/Sports">Sports
<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="/Sports/707326">Lacrosse</a></li>
<li><a href="/Sports/707327">Swimming</a></li>
<li><a href="/Sports/707328">Baseball</a></li>
</ul> <!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a class="drop" href="/Portraits">Portraits
<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="/Portraits/709890">Individual</a></li>
<li><a href="/Portraits/707324">Family</a></li>
<li><a href="/Portraits/707325">Senior</a></li>
<li><a href="/Portraits/709891">Boudior</a></li>
</ul> <!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="/Other">Other</a></li>
</ul> <!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="/gallery/7272886_utoYE">Contact Us</a></li>
<li><a href="/gallery/7248185_h6Lc4">Guestbook</a></li>
</ul> <!--[if lte IE 6]></td></tr></table></a><![endif]-->
</div>

[Firemann]

Okay, got that done. BTW, I had a friend try to view my site at her office and all she could see was the header, three menu items (Home, About Us, & Photo Galleries), none of these links worked, and there was no slideshow.:dunno Would the above change have any bearing on that problem? I don't know what kind of browser she has a work or what kind of company firewalls may have caused the problem.

What next?

[Allen]

Okay, got that done. BTW, I had a friend try to view my site at her office and all she could see was the header, three menu items (Home, About Us, & Photo Galleries), none of these links worked, and there was no slideshow.:dunno Would the above change have any bearing on that problem? I don't know what kind of browser she has a work or what kind of company firewalls may have caused the problem.

What next?
Yelp, only three menu buttons showed in IE. That new html fixed that. All
button show now, but there is still a problem with the IE drop text too big.
Going back in and looking, be back later.

[Allen]

...
Change your whole CSS to this. Let us know how this works. Also fixed
some CSS errors besides the nav.

#userBio {text-align: center !important;}

#bioBox .photo,
#bioBox.boxTop {display:none;}

#my_banner {
width: 750px;
height: 150px;
margin: 10px auto 0; /* top right/left bottom */
background: url(http://lonestar-photography.smugmug.com/photos/466163326_X3B2t-O.jpg) no-repeat;
}

/* hides top bar in theme */
#extraDiv1 {display:none;}

/*===hides Lonestar Photography's Home=== */
#userName, #userHome {display: none;}

#feeds {display:none;}

/* ===creates Photo Gallery link=== */
.homepage #galleriesBox,
.homepage #categoriesBox,
.homepage #featuredBox
{display: none;}

.galleries #bioBox {display: none;}

.galleries #galleriesBox,
.galleries #categoriesBox,
.galleries #featuredBox
{display: block;}

.loggedIn .homepage #galleriesBox,
.loggedIn .homepage #categoriesBox {display: block;}

/* ===Guestbook formatting=== */
.gallery_7248185 .journal_entry {border:none !important;}
.gallery_7248185 .pageNav,
.gallery_7248185 #albumNav_top,
.gallery_7248185 #albumNav_bottom,
.gallery_7248185 .albumNav,
.notLoggedIn .gallery_7248185 #breadcrumb,
.notLoggedIn .gallery_7248185 .journal_entry,
.notLoggedIn .gallery_7248185 #breadcrumb
{display:none;}


/* ===About Us formatting=== */
.gallery_7251982 #albumDescription {
color: #d6b400;
font-family: Papyrus, Comic Sans MS;
font-size: 2em;
}
.gallery_7251982 .pageNav,
.gallery_7251982 #albumNav_top,
.gallery_7251982 #albumNav_bottom,
.gallery_7251982 .albumNav,
.notLoggedIn .gallery_7251982 .journal_entry,
.notLoggedIn .gallery_7251982 #breadcrumb
{display: none;}

/* ===Contact Us formatting=== */
.gallery_7272886 .albumNav,
.gallery_7272886 .journal_entry,
.gallery_7272886 #breadcrumb,
.gallery_7272886 .journal_entry {border:none !important;}

.gallery_7272886 .pageNav,
.gallery_7272886 #albumNav_top,
.gallery_7272886 #albumNav_bottom,
.gallery_7272886 #photos,
.gallery_7272886 #slideshowButton,
.gallery_7272886 #breadCrumbTrail
{display: none;}

/* ===hides breadcrumbs=== */
#breadcrumb {visibility: hidden;}
.loggedIn #breadcrumb {visibility: visible;}
#altViews {visibility: visible;}

/* CSS Dropdown Nav Bar */
/* Original code by Stu Nicholls of */
/* http://www.cssplay.co.uk/ */
/* Edited by me for content, formatting and some elements */
/* Please help support CSSPlay at: */
/* http://www.cssplay.co.uk/support.html */

/* Common Styling */
.menu {
position: relative;
display: block;
z-index: 99;
padding: 20px 0px 30px 0px; /* spacing around menu - top right bottom left */
height: 20px; /* menu container (div .menu) */
width: 670px; /* width of menu - minimize this until doesn't wrap to two lines - too large effects centering */
_width: 680px; /* IE 6 if differnet */
margin: 0 auto; /* this should center navbar, if not tweak with left's below */
}

.menu ul {
padding: 10px 0px 10px 0px; /* this effects menu centering if too big */
margin:0 auto; /* this maybe not needed? */
list-style-type: none;
}

.menu ul li {
/* margin: 0 10px 0 10px; */ /* adds space between main menu boxes */
float:left; /* WARNING: float right reverses menu */
position:relative !important; /* ***** Carbonite fix ***** */
}

.menu ul li a,
.menu ul li a:visited {
display: block;
font-family: Papyrus, Comic Sans MS;
font-size: 13pt; /* main buttons */
color: #d6b400; /* main buttons text non-hover*/
text-decoration:none;
text-align: center; /* centers text in buttons */
width: auto;
_width: 130px; /* IE6 main box width */
height: 20px; /* main box height */
background: #000; /* main button color */
padding: 0 25px;
_padding: 0 0px; /* IE 6 if differnet */
line-height: 20px; /* positions text up/down in box */
}


* html .menu ul li a, .menu ul li a:visited {
width: 130px; w\idth: auto; /* IE main button */
_w\idth: 130px;
}

.menu ul li ul {
display: none;}

/* */
/* Specific to Non-IE browsers */
/* */

.menu ul li:hover a {
color: #d6b400; /* main when hover DD */
background: #000; /* main when hover DD */
}

.menu ul li:hover ul {
display: block;
position: absolute !important; /* ***** Carbonite fix ***** */
top: -4px; /* FF DD up down */
margin-top: 17px; /* FF main mouse active vertical */
left: 25px; /* FF DD right left */
width: 104px; /* unknown */
}

.menu ul li:hover ul li ul {
display: none;
}

.menu ul li:hover ul li a {
display: block;
background: #000; /* DD FO non-hover */
color: #fff; /* DD FO non-hover */
height: auto;
line-height: 20px; /* DD FO box height */
padding: 0px 0px;
width: 120px; /* DD FO box width */
}

.menu ul li:hover ul li a:hover {
background: #000; /* DD FO hover */
color: #d6b400; /* DD FO hover */
}

.menu ul li:hover ul li:hover ul {
display: block;
position: absolute;
left: 102px; /* FF FO right left */
top: -27px; /* FF FO up down */
width: 146px; /* FF FO box width */
}

/* */
/* Specific to IE browsers */
/* */

.menu ul li a:hover {
/* text-decoration: none; */ /* might be needed */
color: #fff; /* main hover */
background: #000; /* main hover */
}

.menu ul li a:hover ul {
display: block;
position: absolute !important; /* ***** Carbonite fix ***** */
top: 8px; /* DD container up down */
background: none; /* gets rid of DD container */
margin-top: 7px; /* DD container up down */
left: 0px; /* DD right left */
}

.menu ul li a:hover ul li a {
display: block;
background: #000; /* IE DD color non-hover */
color: #d6b400; /* IE DD color non-hover */
height: auto;
line-height: 20px; /* IE DD FO box height */
padding: 0px;
width: 130px; /* IE DD FO box */
}

.menu ul li a:hover ul li a ul {
visibility:hidden;
position:absolute;
height: 0;
width: 0;
}

.menu ul li a:hover ul li a:hover {
background: #000; /* DD FO hover */
color: #fff; /* DD FO hover */
}

.menu ul li a:hover ul li a:hover ul {
display: block;
position: absolute;
top: -15px; /* FO up down */
color: #000000; /* unknown */
left: 130px; /* FO right left */
}

/*ADD TO FIX IE*/
/* a hack so that IE5.5 faulty box model is corrected */

* html .menu a, * html .menu a:visited {
width: 125px;
w\idth: 139px;
}

/* another hack for IE5.5 */

* html .menu ul ul {
top: 30px;
t\op: 31px; /* IE gap between main bar and the dropdown items */
}

/* style the table so that it takes no part in
the layout - required for IE to work */
.menu table {
position:absolute;
top:auto 0; left:0;
}

/* yet another hack for IE5.5 */

* html .menu ul ul a {
width: 125px; /* unknown */
w\idth: 104px; /* DD FF width */
}

/*END EXTRA ADDS FOR IE*/

/* ADD TO HIDE EXTRA LEVELS */
/* make the 2nd level visible when
hover on 1st level list OR link */
.menu ul a:hover ul, /* IE */
.menu ul:hover ul { /* FF */
visibility:visible;
}

/* keep the 3rd level hidden when you
hover on 1st level list OR link */
.menu ul a:hover ul ul, /* IE */
.menu ul:hover ul ul { /* FF */
visibility:hidden;
}

/* keep the 4th level hidden when you
hover on 2nd level list OR link */
.menu ul li a:hover ul li a:hover ul ul, /* IE */
.menu ul li:hover ul li:hover ul ul { /* FF */
visibility:hidden;
}

/* make the 3rd level visible when you hover
over 2nd level list OR link */
.menu ul a:hover ul a:hover ul, /* IE */
.menu ul:hover ul:hover ul { /* FF */
visibility:visible;
}

/* make the 4th level visible when you
hover over 3rd level list OR link */
.menu ul li a:hover ul li a:hover ul li a:hover ul, /* IE */
.menu ul li:hover ul li:hover ul li:hover ul { /* FF */
visibility:visible;
}

/* ==== END NAVBAR CODE ==== */

[Firemann]

It works perfect. I can't thank you enough for all your help. I would never have gotten this figured out. THANK YOU!!:clap

[Firemann]

I've had my site working & looking great, but then.....
I added another menu button for "Products" and linked it to an HTML page. No problem there, but the extra menu button caused my nav bar to wrap to a second line. I've played with some numbers I thought were margins, but it's not making any difference. Help!!

Richard

[Allen]

I've had my site working & looking great, but then.....
I added another menu button for "Products" and linked it to an HTML page. No problem there, but the extra menu button caused my nav bar to wrap to a second line. I've played with some numbers I thought were margins, but it's not making any difference. Help!!

Richard
Change the width in this, too small and the buttons pop to the next line.
Too big and the nav doesn't center.

.menu {
position: relative;
display: block;
z-index: 99;
padding: 20px 0px 30px 0px; /* spacing around menu - top right bottom left */
height: 20px; /* menu container (div .menu) */
width: 790px; /* width of menu - minimize this until doesn't wrap to two lines - too large effects centering */
margin: 0 auto; /* this should center navbar, if not tweak with left's below */
}

[Firemann]

Thanks, Allen. That did the trick. I was adjusting that width #, but quit at 750 because it didn't seem to be working. Guess I gave up a little too quick. Thanks again!

[Allen]

Thanks, Allen. That did the trick. I was adjusting that width #, but quit at 750 because it didn't seem to be working. Guess I gave up a little too quick. Thanks again!
Here's what the width does.

The auto in margin: 0 auto; will center whatever width entered in the CSS
below. Increase the width until the menu does not wrap to two lines but not
too much or it will not be centered. Think of the width as an invisible box
with the menu buttons left justified in it. It's that invisible box that's centering.
IE6 sometimes takes a slightly wider width. So an underline is used for its for it's
width (_width). For IE7 use ~width

#navcontainer {
margin: 0 auto;
width: 385px; /* Firefox and most other browsers */
_width: 390px; /* for IE6 */
~width: 388px; /* IE7 */
}+

dotted boxes is the nav container width set above in the CSS. The buttons flow inside it.
See below how as width decreases the buttons shift to the right till they pop out.

<-- width |ctr| -->
.................................................. ......................
. button button button button button .
.................................................. ......................

.................................................. .........
. button button button button button .
.................................................. .........

........................................
. button button button button button .
........................................

...................................
. button button button button .
...................................
button << button wrapped to next line, didn't fit in width