Nav bar sub list

[Markjay]

how do I get these nav bar sub list links to work as as a drop down for my
Galleries link on my nav bar?

here are the links (I created the correct url's below) I want to add under Galleries and naturally I'll need to style this in a way that works with the page it's on. Also, do I need to do something to make the ampersand symbol appear correctly?

This is for http://360photostock.com and I want these to appear as a drop down under Galleries

<li><a href="http://www.360photostock.com/gallery/4119700_VV7Xt#240365428">Business</a></li>
<li><a href="http://www.360photostock.com/gallery/4163446_fFkMo#244577882">Beach Life</a></li>
<li><a href="http://www.360photostock.com/gallery/4210465_doJUz#244721477">Birds & Animals</a></li>
<li><a href="http://www.360photostock.com/gallery/4163536_wVUbn#261856275">Flowers</a></li>
<li><a href="http://www.360photostock.com/gallery/4162926_2xioY#243545029">Food & Drink</a></li>
<li><a href="http://www.360photostock.com/gallery/4163279_BKxzg#241704586">Backrounds</a></li>
<li><a href="http://www.360photostock.com/gallery/4210392_t6E5p#246144679">Abstracts</a></li>
<li><a href="http://www.360photostock.com/gallery/4375989_QXY2T#258056524">Art & Graphics</a></li>
<ul></div>

[Allen]

how do I get these nav bar sub list links to work as as a drop down for my
Galleries link on my nav bar?

here are the links (I created the correct url's below) I want to add under Galleries and naturally I'll need to style this in a way that works with the page it's on. Also, do I need to do something to make the ampersand symbol appear correctly?

This is for http://360photostock.com and I want these to appear as a drop down under Galleries

<li><a href="http://www.360photostock.com/gallery/4119700_VV7Xt#240365428">Business</a></li>
<li><a href="http://www.360photostock.com/gallery/4163446_fFkMo#244577882">Beach Life</a></li>
<li><a href="http://www.360photostock.com/gallery/4210465_doJUz#244721477">Birds & Animals</a></li>
<li><a href="http://www.360photostock.com/gallery/4163536_wVUbn#261856275">Flowers</a></li>
<li><a href="http://www.360photostock.com/gallery/4162926_2xioY#243545029">Food & Drink</a></li>
<li><a href="http://www.360photostock.com/gallery/4163279_BKxzg#241704586">Backrounds</a></li>
<li><a href="http://www.360photostock.com/gallery/4210392_t6E5p#246144679">Abstracts</a></li>
<li><a href="http://www.360photostock.com/gallery/4375989_QXY2T#258056524">Art & Graphics</a></li>
<ul></div>
Change your header html to this.

<div id="my_banner"> </div>
<div class="menu">
<ul>
<li><form name="searchBox" id="searchBox" method="get" action="/search/index.mg" onsubmit="checkInput('search','searchWords',' ')"><input onclick="checkInput('search','searchWords','')" onblur="checkInput('','searchWords','search')" id="searchWords" name="searchWords" value="search" type="text"><input name="searchType" value="InUser" type="hidden"><input name="NickName" value="360photostock" type="hidden"><input src="/img/spacer.gif" alt="Submit Search" title="Submit Search" class="searchglass" onclick="if(document.searchBox.searchWords.value == 'search') { document.searchBox.searchWords.value = ' '; }" type="image"></form></li>
<li><a href="/">Home</a></li>
<li><a class="drop" href="/featured">Galleries
<!--[if IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="/gallery/4119700_VV7Xt">Business</a></li>
<li><a href="/gallery/4163446_fFkMo">Beach Life</a></li>
<li><a href="/gallery/4210465_doJUz">Birds &amp; Animals</a></li>
<li><a href="/gallery/4163536_wVUbn">Flowers</a></li>
<li><a href="/gallery/4162926_2xioY">Food &amp; Drink</a></li>
<li><a href="/gallery/4163279_BKxzg">Backrounds</a></li>
<li><a href="/gallery/4210392_t6E5p">Abstracts</a></li>
<li><a href="/gallery/4375989_QXY2T">Art &amp; Graphics</a></li>
</ul> <!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="/gallery/4218370">Links</a></li>
<li><a href="/gallery/4218629">Services</a></li>
<li><a href="/gallery/4145492">Contact</a></li>
<li><a href="/gallery/4346805_6S5z4">About</a></li>
</ul> <!--[if lte IE 6]></td></tr></table></a><![endif]-->
</div>

Add this to your CSS. You can remove the navcontainer CSS.
Got your colors all incorporated.

/* 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: 800px; /* 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: 1em; /* main buttons */
color: #BC9A52; /* main buttons text non-hover*/
text-decoration:none;
text-align: center; /* centers text in buttons */
width: 100px; /* main box width */
height: 20px; /* main box height */
border: 1px solid #B29957; /* start your design with borders on, easier to position DD's & FO's */
border-width: 1px 1px 1px 1px;
background: #352611; /* 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: 104px; w\idth: 104px; /* IE main button */
}

.menu ul li ul {
display: none;}

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

.menu ul li:hover a {
color: #fff; /* main when hover DD */
background: #806A5D; /* 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: #352611; /* DD FO non-hover */
color: #BC9A52; /* DD FO non-hover */
height: auto;
line-height: 20px; /* DD FO box height */
padding: 0px 0px;
width: 100px; /* DD FO box width */
}

.menu ul li:hover ul li a:hover {
background: #806A5D; /* DD FO hover */
color: #fff; /* 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: #806A5D; /* 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: #352611; /* IE DD color non-hover */
color: #BC9A52; /* 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: #806A5D; /* DD FO hover includes menu 6 */
color: #fff; /* DD FO hover includes menu 6 */
}

.menu ul li a:hover ul li a:hover ul {
display: block;
position: absolute;
top: -22px; /* FO up down */
color: #BC9A52; /* 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 ==== */

Add the height line in this so it's same height as nav cells.

#searchWordsShort,
#searchWords {
border: 1px solid #B29957;
color: #BC9A52 !important;
background: #352611 !important;
height: 18px;
}

[Markjay]

I've got it all under control and working well except......

when I hover over the Galleries link the first sub category (Business) is edging over the word Galleries. I can't seem to find that control to change the height of the first sub menu item so the Galleries word is not partially blocked / hidden by the sub link for Business.

http://360photostock.com

Also note: I would like to move the nav bar just a tad closer (higher) on the page towards the banner but, I can't seem to get it to move a tad more since I set that to zero and that's as close it it's getting.
If it can't be moved closer, it's not a major thing for me.

That.... is what you can help me with when you get the chance.

Please.

Thank you

[Allen]

I've got it all under control and working well except......

when I hover over the Galleries link the first sub category (Business) is edging over the word Galleries. I can't seem to find that control to change the height of the first sub menu item so the Galleries word is not partially blocked / hidden by the sub link for Business.

http://360photostock.com

That.... is what you can help me with when you get the chance.

Please.

Thank you
This set works in Firefox and IE6. Compare to what you have, made many
many little changes.


/* THIS IS FOR THE NAV BAR UNDER THE HEADER*/

/* 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: 10px 0px 5px 0px; /* spacing around menu - top right bottom left */
height: 20px; /* menu container (div .menu) */
width: 770px; /* 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: 0px 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.2em; /* main buttons */
color: #BC9A52; /* main buttons text non-hover*/
text-decoration:none;
text-align: center; /* centers text in buttons */
width: 100px; /* main box width */
height: 20px; /* main box height */
/* border: 1px solid #B29957; */ /* start your design with borders on, easier to position DD's & FO's */
/* border-width: 1px 1px 1px 1px; */
background: none; /* 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: 100px; w\idth: 100px; /* IE main button */
}

.menu ul li ul {
display: none;}

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

.menu ul li:hover a {
color: #fff; /* main when hover DD */
background: #806A5D; /* main when hover DD */
}

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

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

.menu ul li:hover ul li a {
display: block;
background: #352611; /* DD FO non-hover */
color: #BC9A52; /* DD FO non-hover */
height: auto;
line-height: 20px; /* DD FO box height */
padding: 0px 0px;
width: 120px; /* DD FO box width */
border: 1px solid #B29957;
}

.menu ul li:hover ul li a:hover {
background: #806A5D; /* DD FO hover */
color: #fff; /* 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: 120px; /* FF FO box width */
}

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

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

.menu ul li a:hover ul {
display: block;
position: absolute !important; /* ***** Carbonite fix ***** */
top: 10px; /* 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: #352611; /* IE DD color non-hover */
color: #BC9A52; /* IE DD color non-hover */
height: auto;
line-height: 20px; /* IE DD FO box height */
padding: 0px;
width: 120px; /* IE DD FO box */
border: 1px solid #B29957;
}

.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: #806A5D; /* DD FO hover includes menu 6 */
color: #fff; /* DD FO hover includes menu 6 */
}

.menu ul li a:hover ul li a:hover ul {
display: block;
position: absolute;
top: -22px; /* FO up down */
color: #BC9A52; /* unknown */
left: 120px; /* 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: 120px;
w\idth: 120px;
}

/* 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: 120px; /* unknown */
w\idth: 120px; /* 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;
}



#searchWordsShort,
#searchWords {
border: 1px solid #B29957;
color: #BC9A52 !important;
background: #352611 !important;
/* height: 18px; */
}
/* ==== END NAVBAR CODE ==== */

Edit: updated with drop box width changes

[Markjay]

you're a gentlemen and a scholar. Thank you!

I increased size of the nav bar font to 1.2 em from 1.0 em. It's a little eaiser to read now but, slightly tight in the drop down menu boxes. I can't locate the width control for the drop down menu items to increase it's width so the words do not appear as tight with the new 1.2 size font?

Other than that... we're done with this particular customization project :-)



[quote=Allen]This set works in Firefox and IE6. Compare to what you have, made many
many little changes.

[Markjay]

Just a bump to see if anyone knows where I can find this in my code or how to accomplish this?

I increased size of the nav bar font to 1.2 em from 1.0 em. It's a little eaiser to read now but, slightly tight in the drop down menu boxes. I can't locate the width control for the drop down menu items to increase it's width so the words do not appear as tight with the new 1.2 size font?




This set works in Firefox and IE6. Compare to what you have, made many
many little changes.

[Allen]

Just a bump to see if anyone knows where I can find this in my code or how to accomplish this?

I increased size of the nav bar font to 1.2 em from 1.0 em. It's a little eaiser to read now but, slightly tight in the drop down menu boxes. I can't locate the width control for the drop down menu items to increase it's width so the words do not appear as tight with the new 1.2 size font?
I updated post 4 CSS with new widths, see if that does it. I basically started
here. /* Specific to Non-IE browsers */ and changed the widths to 120px.

[Markjay]

Ok, I just changed the width of the submenu boxes to 110 and it seem fine.
http://360photostock.com
Here's my last problem:

I finally got the menu centered in both IE & FF perfectly.
Only problem now is, while I shifted the main nav bar menu, it also appears to have shifted the submenu under Galleries the same distance / direction (I made it shift to the right) :-(

Here's the item that I changed. The main nav bar centered when I changed the number to 30 (see below). Where do I then "re-center" the submenu?

.menu ul {
padding: 0px 0px 0px 30px




I updated post 4 CSS with new widths, see if that does it. I basically started
here. /* Specific to Non-IE browsers */ and changed the widths to 120px.

[Allen]

Ok, I just changed the width of the submenu boxes to 110 and it seem fine.
http://360photostock.com
Here's my last problem:

I finally got the menu centered in both IE & FF perfectly.
Only problem now is, while I shifted the main nav bar menu, it also appears to have shifted the submenu under Galleries the same distance / direction (I made it shift to the right) :-(

Here's the item that I changed. The main nav bar centered when I changed the number to 30 (see below). Where do I then "re-center" the submenu?

.menu ul {
padding: 0px 0px 0px 30px
These two below move the dropdowns (DD). FF=Firefox
-40px works for FF.

/* Specific to Non-IE browsers */
.menu ul li:hover ul {
display: block;
position: absolute !important; /* ***** Carbonite fix ***** */
top: 3px; /* FF DD up down */
margin-top: 17px; /* FF main mouse active vertical */
left: -40px; /* FF DD right left */
width: 110px; /* unknown */
}

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

[Markjay]

Worked like a charm and, once again...
you've been instrumental in helping me "get things right" on my pages.

Thank you very much, Allen!