Originally Posted by BC Krazy www.karendelongphotography.com The dropdown hovers will not stay visible, please help Karen

Here's the CSS but you have some errors in your header htmi, I'll look at that next as soon as I finish
dinner. This CSS will probably need a few tweaks after the html is fixed, will look again then.
Edit: See post #2243 for new CSS.

... removed for new version in post #2243

Originally Posted by BC Krazy www.karendelongphotography.com ... Karen

You have a lot of dogs names. It would be very hard to show them all in a flyout. And it would extend far below the page. I tried to make multiple columns but noticed you're only up into the B's and it would probably take many columns. I'd suggest making an index page for all the names/links and link to that.
The list of names would go into a gallery description something like I've done here. It can be formatted
and look any way you want. What do you think?

Originally Posted by BC Krazy www.karendelongphotography.com ... Karen

Here's the updated header html.

<!-- 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 -->

<div class="menu">
<ul>
<!-- First Main Menu Item -->
<li><a class="drop" href="/" title="Karen DeLong Photography">Home
     <!--[if gte IE 7]><!--></a><!--<![endif]-->
     <!--[if lte IE 6]><table><tr><td><![endif]-->
      <ul>
       <li><a href="mailto:info@karendelongphotography.com" title="Leave Karen Email">Email Us</a></li>
       <li><a href="/gallery/24407385_XP9Nwt" title="About">About</a></li>
    </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<!-- Next Main Menu Item -->
<li><a class="drop" href="/galleries" title="Galleries">Galleries
    <!--[if gte IE 7]><!--></a><!--<![endif]-->
    <!--[if lte IE 6]><table><tr><td><![endif]-->
    <ul>
         <li><a href="/ShowAdDesign/Show-Ads/19724046_LpBBt6">Show Ad Design</a></li>  
         <li><a href="/Print/Advertising/24884742_t8JSdB" title="advertising">Advertising</a></li>
         <li><a href="/Print-Media-1" title="Print Media">Print Media</a></li>
         <li><a href="/Photobags/Photobags/26028622_MwW8GV">Photobags</a></li>

         <li><a class="drop" href="/AGILITY-EVENT-PHOTOS" title="Agility Event Photos">Agility Event Photos »
              <!--[if gte IE 7]><!--></a><!--<![endif]-->
              <!--[if lte IE 6]><table><tr><td><![endif]-->
              <ul>
                   <li><a href="/AGILITY-EVENT-PHOTOS/ASCA-Agility-March-24-2012">ASCA Agility</a></li>
                   <li><a href="/AGILITY-EVENT-PHOTOS/Good-Dog-USDAA-Jan-7-8-2012">Good Dog USDAA</a></li>
                   <li><a href="/AGILITY-EVENT-PHOTOS/Good-Dog-USDAA-Jan-7-8-2012/Good-Dog-Agility-7-8-2012-Win/21456528_qjg3JS">Good Dog USDAA Win Photos</a></li> 
                   <li><a href="/AGILITY-EVENT-PHOTOS/Superstition-Kennel-Club-AKC">Superstition Kennel Club</a></li>
                   <li><a href="/AGILITY-EVENT-PHOTOS/Good-Dog-USDAA-Agility-Trial">Good Dog USDAA 2011</a></li>
                   <li><a href="/AGILITY-EVENT-PHOTOS/Valle-Del-Sol-Golden-Retriever">Valle Del Sol Golden Retriever 2011</a></li>
                   <li><a href="/AGILITY-EVENT-PHOTOS/Good-Dog-USDAA-Intro-Trial-Oct">Good Dog USDAA Intro Trial 2011</a></li>
                   <li><a href="/AGILITY-EVENT-PHOTOS/JCAC-NADAC-Agility-Trial-Oct">JCAC NADAC 2011</a></li>
                   <li><a href="/AGILITY-EVENT-PHOTOS/JCAC-NADAC-Trial-Oct-15-17">JCAC NADAC 2010</a></li>
                   <li><a href="/AGILITY-EVENT-PHOTOS/JCAC-NADAC-Trial-Oct-13-2012">JCAC NADAC OCT 2012</a></li>
              </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]-->
         </li>

         <li><a class="drop" href="/AGILITY-PHOTOS-By-Dogs-Name" title="Agility Photos By Dogs Name">Agility Photos By Dogs Name »
              <!--[if gte IE 7]><!--></a><!--<![endif]-->
              <!--[if lte IE 6]><table><tr><td><![endif]-->
              <ul>
                   <li><a href="/AGILITY-PHOTOS-By-Dogs-Name/Abbey/10365409_rQFpjZ">Abbey</a></li>
                   <li><a href="/AGILITY-PHOTOS-By-Dogs-Name/Abby-Schnauzer-1/15214147_6vsgmc">Abby (Schnauzer)</a></li>
                   <li><a href="/AGILITY-PHOTOS-By-Dogs-Name/Abby-1/12241815_HPrxcr">Abby (Aussie)</a></li>
                   <li><a href="/AGILITY-PHOTOS-By-Dogs-Name/Able-1/7547744_VJ6bBM">Able</a></li>
                   <li><a href="/AGILITY-PHOTOS-By-Dogs-Name/Ace-Am-Water-Spaniel-1/14949458_494JTM">Ace</a></li>
                   <li><a href="/AGILITY-PHOTOS-By-Dogs-Name/Ace-BC-1/10218759_rdVt4f">Ace</a></li>
                   <li><a href="/AGILITY-PHOTOS-By-Dogs-Name/Ace-Belgian-Tervuren-1/10101054_T5QK9V">Ace</a></li>
                   <li><a href="/AGILITY-PHOTOS-By-Dogs-Name/Addie-1/11869645_PhnX5t">Addie</a></li>
                   <li><a href="/AGILITY-PHOTOS-By-Dogs-Name/Aero-1/7031836_8XWwWP">Aero</a></li>
                   <li><a href="/AGILITY-PHOTOS-By-Dogs-Name/Aideen-1/10199889_Z3fSz7">Aideen</a></li>
                   <li><a href="/AGILITY-PHOTOS-By-Dogs-Name/Airo/6936060_knkNgf#!i=443839055&amp;k=AQPsu">Airo</a></li>
                   <li><a href="/AGILITY-PHOTOS-By-Dogs-Name/AJ/14967371_dFvW3q#!i=1117806390&amp;k=tkPjH">AJ</a></li>
                   <li><a href="/AGILITY-PHOTOS-By-Dogs-Name/AJ/14967371_dFvW3q#!i=1117806390&amp;k=tkPjH">AJ</a></li>
                   <li><a href="/AGILITY-PHOTOS-By-Dogs-Name/Ali/9763509_CKtNVZ#!i=433267774&amp;k=UcxSN">Ali</a></li>
                   <li><a href="/AGILITY-PHOTOS-By-Dogs-Name/Ali/9763509_CKtNVZ#!i=433267774&amp;k=UcxSN">Allie</a></li>
                   <li><a href="/AGILITY-PHOTOS-By-Dogs-Name/Amber/10490927_tM5h82#!i=728038371&amp;k=W22Ee">Amber</a></li>
                   <li><a href="/AGILITY-PHOTOS-By-Dogs-Name/Ana/9763292_fVB8sj#!i=435246523&amp;k=uR3DN">Ana</a></li>
                   <li><a href="/AGILITY-PHOTOS-By-Dogs-Name/Angel-Golden-Ret/10218824_tJW6hP#!i=704431003&amp;k=Z3KkA">Angel</a></li>
                   <li><a href="/AGILITY-PHOTOS-By-Dogs-Name/Angel/7546883_ZxT4Jm#!i=579368325&amp;k=FYY2v">Angel</a></li>
                   <li><a href="/AGILITY-PHOTOS-By-Dogs-Name/Angela/10439255_cn57mP#!i=723911974&amp;k=uP4QZ">Angela</a></li>
                   <li><a href="/AGILITY-PHOTOS-By-Dogs-Name/Angie/16157268_qvG6XX#!i=1213169457&amp;k=wGKor">Angie</a></li>
                   <li><a href="/AGILITY-PHOTOS-By-Dogs-Name/Annika/6903774_F2fZR7#!i=441816425&amp;k=QEYRo">Annika</a></li>
                   <li><a href="/AGILITY-PHOTOS-By-Dogs-Name/Apache-All-American/10101828_zcPxxd">Apache</a></li>
                   <li><a href="/AGILITY-PHOTOS-By-Dogs-Name/Apache-Border-Terrier/10491069_ZCXpf7">Apache (Border Terrier)</a></li>
                   <li><a href="/AGILITY-PHOTOS-By-Dogs-Name/Apache/7101621_VvRwmT">Apache (Aussie)</a></li>
                   <li><a href="/AGILITY-PHOTOS-By-Dogs-Name/Arthur/11016210_9WnXcX">Arthur</a></li>
                   <li><a href="/AGILITY-PHOTOS-By-Dogs-Name/Asia/10773927_NSVj7M">Asia</a></li>
                   <li><a href="/AGILITY-PHOTOS-By-Dogs-Name/Augie-Dog/12242258_xzXRgf">Augie Dog</a></li>
                   <li><a href="/AGILITY-PHOTOS-By-Dogs-Name/Augie/10218933_HLJjpd">Augie</a></li>
                   <li><a href="/AGILITY-PHOTOS-By-Dogs-Name/Awesome/10439270_2bRkHz">Awesome</a></li>
                   <li><a href="/AGILITY-PHOTOS-By-Dogs-Name/Bailey-All-American/6902422_qTqhbP">Bailey (All Am.)</a></li>
                   <li><a href="/AGILITY-PHOTOS-By-Dogs-Name/Bailey-Cocker-X-1/10491280_pNcrZB">Bailey (Cocker X)</a></li>
                   <li><a href="/AGILITY-PHOTOS-By-Dogs-Name/Bailey-Shiba-Inu-1/6936986_p5qf24">Bailey(Shiba) </a></li>                                    
              </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]-->
         </li>

    </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<!-- Next Main Menu Item -->
<li><a href="http://www.kdelongphotography.com/gallery/9885152_Akyud" title="Sessions">Sessions</a></li>
<!-- Next Main Menu Item -->
<li><a href="/Portfolio1/Portfolio-1/26172020_kVtGmV" title="Portfolio">Portfolio</a></li>
<!-- Next Main Menu Item -->
<li><a href="http://karendelongphotography.blogspot.com//" title="Blog">Blog</a></li>
</ul>

</div>
<!-- End Navbar Code -->

New CSS

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

/* CSS Section */

      /* style the outer div to give it width */
.menu {
   z-index:99;
   position:relative;    /* Make the container moveable */
   margin: 0 auto 20px;  /* top R/L bottom */
   width:450px;          /* Main bar total width, minimize to not wrap to two lines*/
}

      /* remove all the bullets, borders and padding from the default list styling */
.menu ul {
   padding:0;
   margin:0;
   list-style-type:none;
}

      /* float the list to make it horizontal and a relative position so that you can control the dropdown menu positon */
.menu li {
   float:left;          /* float right will reverse the main buttons */
   text-align:center;
   width:auto; 
   position:relative;
   padding: 0;
}

      /* style the links for the top level */
.menu a, .menu a:visited {
   display:block;
   text-decoration:none;  /* none, overline, underline */
   color:#D7B980;
   background:none;
   font-size:13pt;
   font-family: verdana, Comic Sans MS, tahoma, helvetica, arial, sans-serif;
   width:auto;         /* Defines the main box dimensions. */
   height:20px;        /* How tall your cells are */
   line-height:20px;   /* vertical text alignment in cell */ 
   padding: 0 10px;    /* top/bottom R/L */
   min-width: 60px;    /* set to smallest text and use R/L padding above to space out */
}

      /* main hover */
.menu a:hover, .menu :hover > a {
   color:#5E5874;
   background:#000;
}

      /* a hack so that IE5.5 faulty box model is corrected */
* html .menu a, * html .menu a:visited {width:130px; w\idth:130px;}

      /* style the table so that it takes no part in the layout */
.menu table {position:absolute; top:0; left:0;}



      /* ***** LEVEL 2 ***** LEVEL 2 ***** LEVEL 2 ***** */

      /* another hack for IE5.5 */
* html .menu ul ul {top:20px; t\op:21px;}   /* IE gap between main bar and the dropdown items */


      /* hide the sub levels and give them a position absolute so that they take up no room */
.menu ul ul {
   visibility:hidden;
   position:absolute;
   height:0;
   top:20px;       /* move drop vertically */
   left:0;         /* move drop horizontally   */
   width:195px;    /* Size of the daughter cells */
}

      /* style the second level background non-hover */
.menu ul ul a.drop, .menu ul ul a.drop:visited {background:#000;}  /* if 3rd level exists */

      /* style the second level hover */
.menu ul ul a.drop:hover {background:#000;}
.menu ul ul :hover > a.drop {background:#000;}

      /* style the second level links */
.menu ul ul a, .menu ul ul a:visited {
   color:#D7B980;
   background:#000;
   height:20px; 
   line-height:20px; 
   width:195px;
   text-align: left;
}

.menu ul ul :hover > a.drop  {background:#000;}   /* 2nd if 3rd level exists */

      /* yet another hack for IE5.5 */
* html .menu ul ul a {width:120px; w\idth:120px;}

      /* 2nd level hover */
.menu ul ul a:hover, .menu ul ul :hover > a {
   color:#5E5874;
   background:#000;
}


      /* ***** LEVEL 3 ***** LEVEL 3 ***** LEVEL 3 ***** */

      /* position the third level flyout menu */
.menu ul ul ul {
   left:210px; 
   top:0;
   width:220px;
   height:auto;
}

.menu ul ul ul li a {color:#D7B980;}
.menu ul ul ul li a:hover {color:#5E5874;}

      /* style the third level background */
.menu ul ul ul a, .menu ul ul ul a:visited {background:#000;}  /* not FF */

      /* style the third level hover */
.menu ul ul ul a:hover {background:#000;}
.menu ul ul ul :hover > a {background:#000;}     /* 3rd (w/o 4th) 4th hover */

      /* style the third level links */
.menu ul ul ul a, .menu ul ul ul a:visited {
   color:#D7B980;         /* hover 2nd > 3rd & 4th */
   background:#000;       /* hover 3rd > 4th */
   height:20px; 
   line-height:20px; 
   width:220px;
   text-align: left;
}

      /* make the 2nd level visible when hover on 1st level */
.menu ul :hover ul {visibility:visible;}
      /* make the 3rd level visible when you hover over 2nd level */
.menu ul :hover ul :hover ul {visibility:visible;}
      /* keep the 3rd level hidden when you hover on 1st level */
.menu ul :hover ul ul {visibility:hidden;}

/* End Navbar Code */

Originally Posted by Allen There is a gap and the mouse is lost sliding over it. The red "top" needs to be tweaked to remove the gap. 30px works in Firefox but might need to be reduced for other browser maybe to 29. /* hide the sub levels and give them a positon absolute so that they take up no room */ .menu ul ul { visibility:hidden; position:absolute; height:0; top:30px; left:0; width:125px; /* Size of the daughter cells */ } You have other problems sliding down thru the rest of the buttons. I'd recommend switching to the CSS in the first post of this thread, much easier to work with. If you can't figure it out I can convert it for you.

Allen, that would be awesome if you could convert it for me, I dont want to mess this up any further, and my clients cant access my site atm, it would be GREATLY appreciated!!! THANKS! Karen

Originally Posted by Allen Here's the CSS but you have some errors in your header htmi, I'll look at that next as soon as I finish dinner. This CSS will probably need a few tweaks after the html is fixed, will look again then. Edit: See post #2243 for new CSS. ... removed for new version in post #2243

Where do I find post 2243?

Originally Posted by BC Krazy Allen, that would be awesome if you could convert it for me, I dont want to mess this up any further, and my clients cant access my site atm, it would be GREATLY appreciated!!! THANKS! Karen

Allen, I think I did it! Thanks so much! Now just have to figure out your other idea for my a-z dog name galleries!

Happy Halloween, Allen!

Guess I've "tricked" myself today! LOL!

I was trying to get the entries under Travel/United States to be alphabetical. In moving them around, I now have Tennessee, Utah, Yellowstone and US Other at one level too high (same level as United States...). Can you spot my error(s)?

Thanks!

Originally Posted by Butlerkid Happy Halloween, Allen! Guess I've "tricked" myself today! LOL! I was trying to get the entries under Travel/United States to be alphabetical. In moving them around, I now have Tennessee, Utah, Yellowstone and US Other at one level too high (same level as United States...). Can you spot my error(s)? Thanks!

See red. Why it is important to use spaces for indents so nesting/levels is easiely seen.

...
...
        <li><a href="/UnitedStates/Southwest/5062436_meLom" title="">Southwest</a></li>
    </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
        <li><a class="drop" href="/UnitedStates/Tennessee2" title="">Tennessee
...
...
                <li><a href="/UnitedStates/United-States-Other/Glacier-National-Park/9631984_WXLap">Glacier National Park</a></li>
            </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]-->
        </li>
      </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a class="drop" href="/Canada" title="">Canada
...
...

Bless you, Allen! Your help is so very much appreciated!

I've never had a single lesson on coding. I was happy that I got most of the galleries re-arranged with no problem, then I got stuck!

I'm saving this coding and will insert blank lines as suggested!

Thanks, Again!

Originally Posted by Butlerkid Bless you, Allen! Your help is so very much appreciated! I've never had a single lesson on coding. I was happy that I got most of the galleries re-arranged with no problem, then I got stuck! I'm saving this coding and will insert blank lines as suggested! Thanks, Again!

"blank lines"? No comprehend.

I thought the space indents would be more visible if the were 1-2 empty lines between "levels"....

Maybe I mis-understood?

I know indenting helps control "levels'....I just don't know what coding <li>, "ul", etc, triggers moving up or down on the drop down menu bar....

Originally Posted by Butlerkid I thought the space indents would be more visible if the were 1-2 empty lines between "levels".... Maybe I mis-understood? I know indenting helps control "levels'....I just don't know what coding <li>, "ul", etc, triggers moving up or down on the drop down menu bar....

Spacing, indenting, extra blank lines are ONLY for ease of viewing and keeping things straight. Nothing
else. If you go to post #1 and scroll down to the Trouble Shooting section I show some html with red
vertical lines just to show how adding the spaces makes it much easier to see the levels and most
importantly the required closing </ul>'s and </li>'s.

Thanks, Allen. I WILL use this reference!

I truly appreciate your knowledge and willingness to help non-techies like me. Once every 6-12 months I need to make a change, and then it seems like I have to re-learn what I thought I had learned!

You ARE appreciated!

Thanks a lot for sharing the script. I have tried to apply the code in the CSS box and Custom header column. However, there are two questions that I would like to ask:

1. How can I move the nav bar to the left, since it's block my logo now.

2. How can I change the style of the nav bar, such as the colour, font size, or even if I can remove the line of the boxes. (I want to make it look cleaner on the page)

Sorry for the stupid question, but I really don't have any knowledge in web design language....

Thanks,
Terence

http://www.terenceyam.com


Here is how it looks:

[IMG][/IMG]

Originally Posted by TerenceYam Thanks a lot for sharing the script. I have tried to apply the code in the CSS box and Custom header column. However, there are two questions that I would like to ask: 1. How can I move the nav bar to the left, since it's block my logo now. 2. How can I change the style of the nav bar, such as the colour, font size, or even if I can remove the line of the boxes. (I want to make it look cleaner on the page) Sorry for the stupid question, but I really don't have any knowledge in web design language.... Thanks, Terence http://www.terenceyam.com Here is how it looks:

Here's a new CSS set with tweaked colors. Any idea how many levels you'll have?

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

/* CSS Section */

      /* style the outer div to give it width */
.menu {
   z-index:99;
   position:relative;    /* Make the container moveable */
   margin: 0 auto 20px;  /* top R/L bottom */
   width:400px;          /* Main bar total width, minimize to not wrap to two lines*/
   left: -365px;
}

      /* remove all the bullets, borders and padding from the default list styling */
.menu ul {
   padding:0;
   margin:0;
   list-style-type:none;
}

      /* float the list to make it horizontal and a relative position so that you can control the dropdown menu positon */
.menu li {
   float:left;          /* float right will reverse the main buttons */
   text-align:center;
   width:auto; 
   position:relative;
   padding: 0;
}

      /* style the links for the top level */
.menu a, .menu a:visited {
   display:block;
   text-decoration:none;  /* none, overline, underline */
   color:white;
   background:none;
   font-size:11pt;
   font-family: verdana, Comic Sans MS, tahoma, helvetica, arial, sans-serif;
   width:auto;         /* Defines the main box dimensions. */
   height:20px;        /* How tall your cells are */
   line-height:20px;   /* vertical text alignment in cell */ 
   padding: 0 10px;    /* top/bottom R/L */
   min-width: 60px;    /* set to smallest text and use R/L padding above to space out */
}

      /* main hover */
.menu a:hover, .menu :hover > a {
   color:#FFB51E;
   background:none;
}

      /* a hack so that IE5.5 faulty box model is corrected */
* html .menu a, * html .menu a:visited {width:130px; w\idth:130px;}

      /* style the table so that it takes no part in the layout */
.menu table {position:absolute; top:0; left:0;}



      /* ***** LEVEL 2 ***** LEVEL 2 ***** LEVEL 2 ***** */

      /* another hack for IE5.5 */
* html .menu ul ul {top:20px; t\op:21px;}   /* IE gap between main bar and the dropdown items */


      /* hide the sub levels and give them a position absolute so that they take up no room */
.menu ul ul {
   visibility:hidden;
   position:absolute;
   height:0;
   top:20px;       /* move drop vertically */
   left:0;         /* move drop horizontally   */
   width:150px;    /* Size of the daughter cells */
}

      /* style the second level background non-hover */
.menu ul ul a.drop, .menu ul ul a.drop:visited {background:black;}  /* if 3rd level exists */

      /* style the second level hover */
.menu ul ul a.drop:hover {background:#FFB51E;}
.menu ul ul :hover > a.drop {background:#FFB51E;}

      /* style the second level links */
.menu ul ul a, .menu ul ul a:visited {
   color:white;
   background:black;
   height:20px; 
   line-height:20px; 
   width:150px;
   text-align:left;
}

.menu ul ul :hover > a.drop  {background:black;}   /* 2nd if 3rd level exists */

      /* yet another hack for IE5.5 */
* html .menu ul ul a {width:120px; w\idth:120px;}

      /* 2nd level hover */
.menu ul ul a:hover, .menu ul ul :hover > a {
   color:#FFB51E;
   background:black;
}



      /* ***** LEVEL 3 ***** LEVEL 3 ***** LEVEL 3 ***** */

      /* position the third level flyout menu */
.menu ul ul ul {
   left:150px; 
   top:0;
   width:150px;
   height:auto;
}

.menu ul ul ul li a {color:white;}
.menu ul ul ul li a:hover {color:#FFB51E;}

      /* style the third level background */
.menu ul ul ul a, .menu ul ul ul a:visited {background:black;}  /* not FF */

      /* style the third level hover */
.menu ul ul ul a:hover {background:black;}
.menu ul ul ul :hover > a {background:black;}     /* 3rd (w/o 4th) 4th hover */

      /* style the third level links */
.menu ul ul ul a, .menu ul ul ul a:visited {
   color:white;              /* hover 2nd > 3rd & 4th */
   background:black;       /* hover 3rd > 4th */
   height:20px; 
   line-height:20px; 
   width:150px;
}
      /* make the 2nd level visible when hover on 1st level */
.menu ul :hover ul {visibility:visible;}
      /* make the 3rd level visible when you hover over 2nd level */
.menu ul :hover ul :hover ul {visibility:visible;}
      /* keep the 3rd level hidden when you hover on 1st level */
.menu ul :hover ul ul {visibility:hidden;}

/* End Navbar Code */

Hi Allen,

Thanks very much for your feedback. The colour looks great now. However, I still have problems with the position of the nav bar.

PS: I have three levels of navigation.

First of all, I would like to have the nav bar's alignment to the right, but it's centered now. I would like to have it positioned like the defauly smugmug header (as highlighted)



Secondly, if I resize the window, the nav bar will move to the left hand side according to the window movement. Can that be corrected?



Thanks a lot,
Terence

Originally Posted by TerenceYam Hi Allen, Thanks very much for your feedback. The colour looks great now. However, I still have problems with the position of the nav bar. PS: I have three levels of navigation. First of all, I would like to have the nav bar's alignment to the right, but it's centered now. I would like to have it positioned like the defauly smugmug header (as highlighted) Secondly, if I resize the window, the nav bar will move to the left hand side according to the window movement. Can that be corrected? Thanks a lot, Terence

Try this. Do you want the pipes (|) like your current old navbar.?
Replace your header nav html to this.

<!-- Original code by Stu Nicholls of -->
<!-- http://www.cssplay.co.uk/ -->
<!-- Edited for content, formatting, and some elements -->
<!-- Please help support CSSPlay at: -->
<!-- http://www.cssplay.co.uk/support.html -->
<div class="menu">
<ul>
<li><a href="/" title="">Home</a></li>
<li><a class="drop" href="" title="">About
    <!--[if gte IE 7]><!--></a><!--<![endif]-->
    <!--[if lte IE 6]><table><tr><td><![endif]-->
    <ul>
        <li><a href="/gallery/25464781_2SPrwx" title="">The photographer</a></li>
        <li><a href="/gallery/25464781_2SPrwx" title="">The vision</a></li> 
    </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a class="drop" href="#link" title="">Services
    <!--[if gte IE 7]><!--></a><!--<![endif]-->
    <!--[if lte IE 6]><table><tr><td><![endif]-->
    <ul> 
        <li><a href="/gallery/25464781_2SPrwx" title="">Our services</a></li>
        <li><a class="drop" href="/gallery/25464781_2SPrwx" title="">Investment
            <!--[if gte IE 7]><!--></a><!--<![endif]-->
            <!--[if lte IE 6]><table><tr><td><![endif]-->
            <ul>
               <li><a href="#link" title="">Drop 3 Lvl 2</a></li>
            </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]-->
        </li>
    </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="#link" title="">Main 4</a></li>
<li><a href="#link" title="">Main 5</a></li>
</ul>
</div>  <!-- closes menu -->
<div style="clear: both;"></div>
<!-- End Navbar Code -->

Change red in your CSS

      /* style the outer div to give it width */
.menu {
   z-index:99;
   position:relative;    /* Make the container moveable */
   margin: 0 15px 20px auto;  /* top R  bottom left */
   width:410px; 
}

Hi Allen,

Hey Guys,

I am having similar problems getting the custom toolbar and header image just right.

My site thus far can be viewed at http://elisehibbardphotography.smugmug.com for now.

1.) I am trying to get my toolbar higher, on the same level as my header image. (Example:http://tonyurbanphotography.com/)

I am also not sure why, but the header needs to be moved left like it is on all the other pages (it's only behaving this way on the home page.)

2.) Do you know how to get rid of the search bar?

Thanks so much. Any suggestions would be helpful.

Hi Allen,
Can you help me with this please?

Thanks,
Neil

My site
http://www.neilrichmond.com/

I am trying to create a centered Nav Bar with drop downs. To start, I am trying to have top level nav buttons: About, Portfolios, Client Access, All Galleries, & Contact. The drop downs are under Portfolios: Portraits, Events, Performance, Underwater, Masks, & Weddings.

Also, How do include a path statement to the individual galleries (Category: Other/Portraits, etc)?

The Dgrin thread on this subject is 113 pages. I have been reading it for 2 days & I can't find what I want. I added this to my CSS based on your example, but nothing appeared. What's missing?


<div class="menu">
<ul>
<li><a href="Link">About</a></li>
<li><a class="drop" href="Link">Portfolios
<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="Link">Portraits</a></li>
<li><a href="Link">Events</a></li>
<li><a href="Link">Performance</a></li>
<li><a href="Link">Underwater</a></li>
<li><a href="Link">Masks</a></li>
<li><a href="Link">Weddings</a></li>
</ul> <!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>

<li><a href="Link">Client Access</a></li>
<li><a href="Link">All Galleries</a></li>
<li><a href="Link">Contact</a></li>
</ul>
</div>

Originally Posted by Allen Hopefully this will simplify the steps of adding drops to a menu. There have been many questions as to "how do I start". You do not need to read all the posts in this thread as they are mostly just troubleshooting problems others are having and can be very confusing. At the bottom of this post I've included my latest version of CSS sorted by levels. It is the same as what's in post #1 just easier to read. Start by constructing the main bar, paste this into notepad or other pure text editor. Make sure to use spaces to indent lines. <div class="menu"> <ul> <li><a href="Link">Menu 1</a></li> <li><a href="Link">Menu 2</a></li> <li><a href="Link">Menu 3</a></li> <li><a href="Link">Menu 4</a></li> <li><a href="Link">Menu 5</a></li> </ul> </div> Now let's make a dropdown. Let's pick Menu3 for example. Insert blank lines after it. <div class="menu"> <ul> <li><a href="Link">Menu 1</a></li> <li><a href="Link">Menu 2</a></li> <li><a href="Link">Menu 3</a></li> <li><a href="Link">Menu 4</a></li> <li><a href="Link">Menu 5</a></li> </ul> </div> The Menu3 line (or any other button) will now be replaced with this set/group of html and is used for adding a drop/flyout at any level. See this page for reference (notice the blue section inserted). Set of html to be pasted in at any level. <li><a class="drop" href="Link">Menu 3 <!--[if gte IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]--> <ul> <li><a href="Link">Drop 1</a></li> <li><a href="Link">Drop 2</a></li> <li><a href="Link">Drop 3</a></li> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--> </li> So you should now have this with that html set pasted in the blank area. <div class="menu"> <ul> <li><a href="Link">Menu 1</a></li> <li><a href="Link">Menu 2</a></li> <li><a href="Link">Menu 3</a></li> <li><a class="drop" href="Link">Menu 3 <!--[if gte IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]--> <ul> <li><a href="Link">Drop 1</a></li> <li><a href="Link">Drop 2</a></li> <li><a href="Link">Drop 3</a></li> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--> </li> <li><a href="Link">Menu 4</a></li> <li><a href="Link">Menu 5</a></li> </ul> </div> Don't forget to remove the menu line you're replacing. <li><a href="Link">Menu 3</a></li> because the inserted "set" of html replaces it. <div class="menu"> <ul> <li><a href="Link">Menu 1</a></li> <li><a href="Link">Menu 2</a></li> <li><a class="drop" href="Link">Menu 3 <!--[if gte IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]--> <ul> <li><a href="Link">Drop 1</a></li> <li><a href="Link">Drop 2</a></li> <li><a href="Link">Drop 3</a></li> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--> </li> <li><a href="Link">Menu 4</a></li> <li><a href="Link">Menu 5</a></li> </ul> </div> Viola !! Menu with a drop. You can replace any <li><a href="Link">item</a></li> with that set/group of html at any level. Just be sure to add spaces for indentations. Look at post one troubleshootin' section and the vertical red lines and you can see how indenting will help keep things in order visually for each level. This below shows <li><a href="Link">Drop 2</a></li> being replaced with the same set/group of drop html to create another level. <div class="menu"> <ul> <li><a href="Link">Menu 1</a></li> <li><a href="Link">Menu 2</a></li> <li><a class="drop" href="Link">Menu 3 <!--[if gte IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]--> <ul> <li><a href="Link">Drop 1</a></li> <li><a href="Link">Drop 2</a></li> <li><a class="drop" href="Link">Drop 2 <!--[if gte IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]--> <ul> <li><a href="Link">Flyout 1</a></li> <li><a href="Link">Flyout 2</a></li> <li><a href="Link">Flyout 3</a></li> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--> </li> <li><a href="Link">Drop 3</a></li> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--> </li> <li><a href="Link">Menu 4</a></li> <li><a href="Link">Menu 5</a></li> </ul> </div> This is the same CSS as in post #1. /* CSS Dropdown Nav Bar */ /* Original code by Stu Nicholls of */ /* http://www.cssplay.co.uk/ */ /* Edited for content, formatting and some elements */ /* Please help support CSSPlay at: */ /* http://www.cssplay.co.uk/support.html */ /* CSS Section */ /* style the outer div to give it width */ .menu { z-index:99; position:relative; /* Make the container moveable */ margin: 0 auto 20px; /* top R/L bottom */ width:900px; /* Main bar total width, minimize to not wrap to two lines*/ } /* remove all the bullets, borders and padding from the default list styling */ .menu ul { padding:0; margin:0; list-style-type:none; } /* float the list to make it horizontal and a relative position so that you can control the dropdown menu positon */ .menu li { float:left; /* float right will reverse the main buttons */ text-align:center; width:auto; position:relative; padding: 0; } /* style the links for the top level */ .menu a, .menu a:visited { display:block; text-decoration:none; /* none, overline, underline */ color:black; background:white; border:1px solid black; /* optional */ border-width:1px 1px 1px 1px; /* optional */ font-size:12pt; font-family: verdana, Comic Sans MS, tahoma, helvetica, arial, sans-serif; width:auto; /* Defines the main box dimensions. */ height:20px; /* How tall your cells are */ line-height:20px; /* vertical text alignment in cell */ padding: 0 10px; /* top/bottom R/L */ min-width: 60px; /* set to smallest text and use R/L padding above to space out */ } /* main hover */ .menu a:hover, .menu :hover > a { color:purple; background:pink; } /* a hack so that IE5.5 faulty box model is corrected */ * html .menu a, * html .menu a:visited {width:130px; w\idth:130px;} /* style the table so that it takes no part in the layout */ .menu table {position:absolute; top:0; left:0;} /* ***** LEVEL 2 ***** LEVEL 2 ***** LEVEL 2 ***** */ /* another hack for IE5.5 */ * html .menu ul ul {top:20px; t\op:21px;} /* IE gap between main bar and the dropdown items */ /* hide the sub levels and give them a position absolute so that they take up no room */ .menu ul ul { visibility:hidden; position:absolute; height:0; top:20px; /* move drop vertically */ left:0; /* move drop horizontally */ width:150px; /* Size of the daughter cells */ } /* style the second level background non-hover */ .menu ul ul a.drop, .menu ul ul a.drop:visited {background:yellow;} /* if 3rd level exists */ /* style the second level hover */ .menu ul ul a.drop:hover {background:red;} .menu ul ul :hover > a.drop {background:red;} /* style the second level links */ .menu ul ul a, .menu ul ul a:visited { color:red; background:green; height:20px; line-height:20px; width:150px; } .menu ul ul :hover > a.drop {background:purple;} /* 2nd if 3rd level exists */ /* yet another hack for IE5.5 */ * html .menu ul ul a {width:120px; w\idth:120px;} /* 2nd level hover */ .menu ul ul a:hover, .menu ul ul :hover > a { color:purple; background:pink; } /* ***** LEVEL 3 ***** LEVEL 3 ***** LEVEL 3 ***** */ /* position the third level flyout menu */ .menu ul ul ul { left:150px; top:0; width:150px; height:auto; } .menu ul ul ul li a {color:purple;} .menu ul ul ul li a:hover {color:green;} /* style the third level background */ .menu ul ul ul a, .menu ul ul ul a:visited {background:purple;} /* not FF */ /* style the third level hover */ .menu ul ul ul a:hover {background:yellow;} .menu ul ul ul :hover > a {background:yellow;} /* 3rd (w/o 4th) 4th hover */ /* style the third level links */ .menu ul ul ul a, .menu ul ul ul a:visited { color:pink; /* hover 2nd > 3rd & 4th */ background:orange; /* hover 3rd > 4th */ height:20px; line-height:20px; width:150px; } /* ***** LEVEL 4 ***** LEVEL 4 ***** LEVEL 4 ***** */ /* position the fourth level flyout menu */ .menu ul ul ul ul { left:150px; top:0; width:150px; height: auto !important; } /* 4th level non-hover */ .menu ul ul ul ul li a { color:blue; width:150px; } /* style the fourth level hover */ .menu ul ul ul ul a:hover {background:white;} .menu ul ul ul ul :hover > a {background:white;} /* make the 2nd level visible when hover on 1st level */ .menu ul :hover ul {visibility:visible;} /* make the 3rd level visible when you hover over 2nd level */ .menu ul :hover ul :hover ul {visibility:visible;} /* make the 4th level visible when you hover over 3rd level */ .menu ul :hover ul :hover ul :hover ul {visibility:visible;} /* keep the 3rd level hidden when you hover on 1st level */ .menu ul :hover ul ul {visibility:hidden;} /* keep the 4th level hidden when you hover on 2nd level */ .menu ul :hover ul :hover ul ul {visibility:hidden;} /* End Navbar Code */

Got it! Nevermind!

Originally Posted by Chicagoelle Hi Allen, Hey Guys, I am having similar problems getting the custom toolbar and header image just right. My site thus far can be viewed at http://elisehibbardphotography.smugmug.com for now. 1.) I am trying to get my toolbar higher, on the same level as my header image. (Example:http://tonyurbanphotography.com/) I am also not sure why, but the header needs to be moved left like it is on all the other pages (it's only behaving this way on the home page.) 2.) Do you know how to get rid of the search bar? Thanks so much. Any suggestions would be helpful.