Edit: After all the questions in this big thread I hopefully created some simplified html instructions.
See post #1169 Adding Drop/flyouts Simplified
http://www.dgrin.com/showthread.php?...44#post1634244

Please post all new questions on dropdown menus/navbar in this thread. If you are seeking an answer
to something in the old thread, post here and provide a link to the old post.

After years of playing/revising/editing the various versions of CSS I've found that this version
seems to be the easiest to work with. You can just slam this html and CSS in and have a starting
point for your navbar. I've color coded the CSS for text and backgrounds with different colors to make
it easier to find the code.

Here's an expanded view


HTML that goes in the "advanced site-wide customization" Custom Header (optional) box. (not head tag).
Replace each #link with your link.

<!-- 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="#link" title="">Main 2   <!-- no </a></li> on drop lines -->
    <!--[if gte IE 7]><!--></a><!--<![endif]-->
    <!--[if lte IE 6]><table><tr><td><![endif]-->
    <ul>
        <li><a href="#link" title="">Drop 1 Lvl 2</a></li>
        <li><a href="#link" title="">Drop 2 Lvl 2</a></li> 
    </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>

<li><a class="drop" href="#link" title="">Main 3
    <!--[if gte IE 7]><!--></a><!--<![endif]-->
    <!--[if lte IE 6]><table><tr><td><![endif]-->
    <ul> 
        <li><a href="#link" title="">Drop 1 Lvl 2</a></li>

        <li><a class="drop" href="#link" title="">Drop 2 Lvl 2
            <!--[if gte IE 7]><!--></a><!--<![endif]-->
            <!--[if lte IE 6]><table><tr><td><![endif]-->
            <ul>
                <li><a href="#link">Flyout 1 Lvl 3</a></li>
                <li><a href="#link">Flyout 2 Lvl 3</a></li>   
            </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]-->
        </li>
        
        <li><a class="drop" href="#link" title="">Drop 3 Lvl 2
            <!--[if gte IE 7]><!--></a><!--<![endif]-->
            <!--[if lte IE 6]><table><tr><td><![endif]-->
            <ul>
                <li><a href="#link">Flyout 1 Lvl 3</a></li>

                <li><a class="drop" href="#link" title="">Flyout 2 Lvl 3
                    <!--[if gte IE 7]><!--></a><!--<![endif]-->
                    <!--[if lte IE 6]><table><tr><td><![endif]-->
                    <ul>
                        <li><a href="#link">Flyout 1 Lvl 4</a></li>
                        <li><a href="#link">Flyout 2 Lvl 4</a></li>
                    </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]-->
                </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 -->

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: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 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 */

While you are working on your new dropdown navbar add this to your CSS
and only you will see it when logged in. It will allow you to get it perfect
before going public. Leave the old nav in for your visitors for now.

      /* temporary hide new nav when not logged in */
.notLoggedIn .menu {display: none;}
.loggedIn #customNavContainer {display: none;} /* ECZ added nav */
.loggedIn #navcontainer {display: none;} /* other added nav */
      /* end temp CSS */

TROUBLE SHOOTING

The vast majority of problems are because of errors in the html. Check your
html as below. If this structure is not followed your nav might look ok in
Firefox but IE nav will be messed. Ref. this page.

Notice how every <li> & <ul> has a closing </li> & </ul>. Use a pure text
editor like notepad and spaces for indents to keep everything straight.
Also EVERY </ul> that closes a drop should look like this: </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]-->
The last one before the closing div does not.

<div class="menu">
<ul>
...
<li><a h...>xx</a></li>   single  links without drop should end in this </a></li>
<li><a class="drop"...>xx   drop lines do  not get </a></li> at the end
    <!--[if gte IE 7]>....  make sure gte is in all these (recent code update)
    <!--[if lte IE 6]>....
    <ul>
    |   <li><a  h...>xx</a></li>
    </ul> <!--[if lte...
</li>
<li><a class="drop"...>xx
    <!--[if gte...
    <!--[if lte ...
    <ul>
    |   <li><a class="drop"...>xx
    |   |   <!--[if gte...
    |   |   <!--[if lte ...
    |   |   <ul>
    |   |   |   <li><a h...>xx</a></li>
    |   |    </ul> <!--[if lte...
    |   </li>
    |   <li><a class="drop"...>xx
    |   |   <!--[if gte...
    |   |   <!--[if lte ...
    |   |   <ul>
    |   |   |   <li><a class="drop"...>xx
    |   |   |   |   <!--[if gte...
    |   |   |   |   <!--[if lte ...
    |   |   |   |   <ul>
    |   |   |   |   |    <li><a h...>xx</a></li>
    |   |   |   |   </ul>  <!--[if lte...
    |   |   |   <li><a class="drop"...>xx
    |   |    </ul> <!--[if lte...
    |   </li>
    </ul> <!--[if lte...
</li>
<li><a h...>xx</a></li>
...
</ul>
</div>  <!-- closes menu -->
<!-- End Navbar Code -->

All list lines must include a href, if you don't want it clickable use a # in the link.

<li><a class="drop" href="#">xx
<li><a class="drop" href="#nopick">xx
<li><a class="drop" href="#anytext">xx

Full links need the http <a href="http://....
You can't just use <a href="www....
Only relative links start with / not full links. To get a relative link the front end is left off.

<li><a href="http://nickname.smugmug.com/Family/Kids/Joey/12345657_vdyRh">
<li><a href="http://me.mydomian.com/Family/Kids/Joey/12345657_vdyRh">

like this

<li><a href="/Family/Kids/Joey/12345657_vdyRh">
<li><a href="/"> A single slash is used for home link.
<li><a href="/galleries">
<li><a href="/popular">

An unlisted gallery (or any gallery) can be shown like this.

<li><a href="/gallery/12345657_vdyRh">

Notice it hides the cat, sub-cat and nicename in the link which is not
needed for unlisted gallery links.

Drop button doesn't change color on hover. I just noticed if a NiceName link is used, and the
sub-cat is a niceName and has a dash (-) in it, the hover doesn't work. Change the dash
to an underline and the button hover works.

Also noticed on some sites that if the niceName link is used sometimes the gallery name
needs to be removed for hover to work in the drops.

Another note: IE browsers sometimes do not like backgrounds set to "none" in the drops
and the mouse is lost trying to get down to the next text. Instead of using

background: none;

Use this instead

background: rgba(22, 22, 22, .0001);

It applies a background to each and sets the transparency to almost nothing. That way IE
senses a background and you don't lose the mouse between each button text.

Perfect timing, this has most of the info I need to the stuff I am wanting to do. Thanks!

Hello Allen,

Looks like you are the expert with Nav bar and Headers. I've got my basic Header and Nav Bar centered, however I am wanting to change this a bit.

1. I would like to move my Nav Bar all the way to the right and I would like my Header to be all the way on the left. I would like them to be on the same line. I am a little confused on how to do this. (similar to Andy's MoonRiver)

I can tweek the colors and stuff later. If I could just get the position right.

Feel free to check my HTML and CSS.

Thank you much!

www.joeepleyphotography.com

Originally Posted by jepley929 Hello Allen, Looks like you are the expert with Nav bar and Headers. I've got my basic Header and Nav Bar centered, however I am wanting to change this a bit. 1. I would like to move my Nav Bar all the way to the right and I would like my Header to be all the way on the left. I would like them to be on the same line. I am a little confused on how to do this. (similar to Andy's MoonRiver) I can tweek the colors and stuff later. If I could just get the position right. Feel free to check my HTML and CSS. Thank you much! www.joeepleyphotography.com

Looks like you got it there. I'd make a couple changes though.
Don't know where the #wrapNav comes from or where it's used, I'd remove that rule.
Also remove that extra _filter part in red. Add the margins to the #navcontainer rule.

#wrapNav {
   height: 75px;
   padding: 0;
   border-bottom: 1px solid #fff;
   margin: 0px 0px 25px 20px; /* top right bottom left */
}
#navcontainer {
    float: right;
    margin-top: 30px;
    margin-bottom: 20px;
}
_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true,sizingmethod=image,src='http://epleyphoto.smugmug.com/photos/888032901_8NEWh-O.png'); 
}

/*NAV BAR code*/

In your header move the banner below the nav so negative margins won't be needed.

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

Thank you Allen.

I did continue to work on it after I posted my question. After several hours of searching through the forums, I did finally get it looking somewhat like I wanted.

I found you!

Here's the last message I left you: http://www.dgrin.com/showthread.php?t=42747&page=54 #1071

Also, I've played around with banner size and width of the navbar so that it fits everything on the same line - hopefully on all computer monitors. I noticed that it was overlapping on some monitors.

Do you think my banner is too small now?

My navbar spacing looks fine on my computer, but on our older laptop, the navbar looks really spaced apart. I couldn't find the code to make the spaces between the buttons just a tad smaller.

Muchas Gracias!

Originally Posted by L o R a C I found you! Here's the last message I left you: http://www.dgrin.com/showthread.php?t=42747&page=54 #1071 Also, I've played around with banner size and width of the navbar so that it fits everything on the same line - hopefully on all computer monitors. I noticed that it was overlapping on some monitors. Do you think my banner is too small now? My navbar spacing looks fine on my computer, but on our older laptop, the navbar looks really spaced apart. I couldn't find the code to make the spaces between the buttons just a tad smaller. Muchas Gracias!

What do you mean by really spaced out? I don't see that or not understanding what you're seeing.

The 4th level flyout is not showing on top on 3rd level in your blog.
See if adding z-index to this fixes it.

/* make the fourth level visible when you hover over third level list OR link */
.menu ul :hover ul :hover ul :hover ul {visibility:visible;z-index:300;}

Originally Posted by Allen What do you mean by really spaced out? I don't see that or not understanding what you're seeing. The 4th level flyout is not showing on top on 3rd level in your blog. See if adding z-index to this fixes it. /* make the fourth level visible when you hover over third level list OR link */ .menu ul :hover ul :hover ul :hover ul {visibility:visible;z-index:300;}

Nothing worked. I worked on it for hours. Trying to delete code from css/html and nothing worked. It always said I was missing some html closing code (not sure if it was /ul, /li or /a). Finally, today I had a thought - just delete the 4th level info from css and change html code from no pick for portraits & events to link to my site. It worked. I still have all html info for other portraits and events galleries, they're just not being "seen". I know it's a lot of excess that doesn't need to be there. But I give up and I'm ok with it! Thanks for all your help and patience Allen over the past week.

Hello Guys,

I am trying increase the length of my menus at my site. www.owuphotos.com I have included my code below. Any one able to help me out so I can extend the length the menu stays up would be great.
Thanks!!!

/* 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 40px 30px 40px; /* spacing around menu - top right bottom left */
      height: 100px;   /* 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 50px 0 50px;  */  /* 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: black ;           /* 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: 0px solid  white;*/  /* start your design with borders on, easier to position DD's & FO's */
      border-width: 1px 1px 1px 1px;
      background: White;    /* main button color */
      padding-left: 50px;
      line-height: 20px;      /* positions text up/down in box */
}


* html .menu ul li a, .menu ul li a:visited {
      width: 104px; width: 104px;      /* IE main button */
}

.menu ul li ul {
      display: none;}

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

.menu ul li:hover a { 
      color: blue;       /* main when hover DD */
      background: white;  /* 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: block;
}

.menu ul li:hover ul li a {
      display: block;
      background: yellow;  /* DD FO non-hover */
      color: green;           /* 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: red;     /* DD FO hover */
      color: white;      /* 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: blue;               /* main hover */
      background:yellow;        /* 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: white;        /* IE DD color non-hover */
      color: red;               /* 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: blue;                  /* DD FO hover includes menu 6 */
      color: gold;                   /* 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: #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; 
         width: 139px;
}

    /* another hack for IE5.5 */

* html .menu ul ul {
         top: 30px;
         top: 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 */
         width: 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 ==== */ 






       /* ============    Advanced option     =============== */
       /*   The following code allows the right most menu     */
       /*   item dropdown flyouts to fly out to the left.     */
       /* Also need to assign the classes in the header code. */
       /*  <ul class="main6DD"> and <ul class="main6FO">      */
       /*    i.e   <ul class="main6FO">                       */
       /*            <li><a href="http .......                */
       /*          </ul>  <!--[if .......                     */
       /* =================================================== */

         /* FF right most menu box dropdown/flyout */
.menu ul li:hover ul.main6DD li a {
      display:block;
      background: gray;        /* DD FO non-hover FF */
      color: white;            /* DD FO non-hover FF */
      height: auto;
      line-height: 20px;       /* DD FO box height */
      padding: 0px 0px;
      width: 100px; }          /* DD box width */

          /* IE right most menu box dropdown/flyout */
.menu ul li a:hover ul.main6DD  li a, 
.menu ul li a:hover ul.main6FO  li a, {
      width: 100px;              /* IE DD FO box */
      background: gray;       /* DD FO non-hover IE */
      color: white; }           /* DD FO non-hover IE */

          /* right most menu box dropdown */
.menu ul li:hover ul.main6DD {
      left: 0px;}               /* FF DD move right left */
.menu ul li a:hover ul.main6DD {
      left: 0px;}               /* IE DD move right left  */

          /* right most menu box flyout */
.menu ul li:hover ul li:hover ul.main6FO {
      left: -102px;}             /* FF FO move right left  */
.menu ul li a:hover ul li a:hover ul.main6FO {
      left: -102px;}             /* IE FO move right left  */

.menu ul li:hover ul.main6DD li a:hover {
      background: red;          /* DD FO hover FF */
      color: white;}            /* DD FO hover FF */


 /* ==== END NAVBAR OPTIONAL CSS CODE ==== */

Originally Posted by OWUnited Hello Guys, I am trying increase the length of my menus at my site. www.owuphotos.com I have included my code below. Any one able to help me out so I can extend the length the menu stays up would be great. Thanks!!!

More main button? You'll have to be more specific. btw, no need to
post your code, those that can help can see it on your site.

Ok well if you go to my site. Hover over the gallery. Then go and hover over any of the second level gallery, usually I just look at animals. Finally when moving to the third level of the menu, it disappears to quickly. It can be difficult to click on one of the galleries. I am curious if there is a way to increase the time that the menu appears with out having to over over it. Looking over the CSS I think it is somewhere around the code menu ul li;hover ul li, but other then that I am not entirely sure :( I have played around with it, but have not been able to get my desired result.

Originally Posted by Allen More main button? You'll have to be more specific. btw, no need to post your code, those that can help can see it on your site.

Originally Posted by OWUnited Ok well if you go to my site. Hover over the gallery. Then go and hover over any of the second level gallery, usually I just look at animals. Finally when moving to the third level of the menu, it disappears to quickly. It can be difficult to click on one of the galleries. I am curious if there is a way to increase the time that the menu appears with out having to over over it. Looking over the CSS I think it is somewhere around the code menu ul li;hover ul li, but other then that I am not entirely sure :( I have played around with it, but have not been able to get my desired result.

Adjust the lefts is these two to get rid of the gap. 100px in the 1st one works for Firefox.

.menu ul li:hover ul li:hover ul {
      display: block;
      position: absolute;
      left: 100px;           /* 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 ul li a:hover ul {
         display: block;
         position: absolute;  
         top: -22px;                    /*   FO up down    */
         color: #000000;                /*   unknown       */
         left: 147px;                   /*   FO right left */
}

FF = Firefox
FO = flyout

Sweet!!! that did the trick. Thank you so much.

Originally Posted by Allen Adjust the lefts is these two to get rid of the gap. 100px in the 1st one works for Firefox. .menu ul li:hover ul li:hover ul { display: block; position: absolute; left: 100px; /* 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 ul li a:hover ul { display: block; position: absolute; top: -22px; /* FO up down */ color: #000000; /* unknown */ left: 147px; /* FO right left */ } FF = Firefox FO = flyout

Hi Allen,

I'm using a different drop down nav bar (that I copied from my blog template) but have run into a problem i can't fix. I've isolated the code that is causing the problem, but do not know how to change it. (website: http://eehyndman.smugmug.com blog: http://eehyndman.blogspot.com)

This part of the code:
.nav ul {
position:absolute;
top:-999em;
background-position: bottom;
background-repeat: no-repeat;
}
.nav li {
float:right;
position:relative;
}

It causes the smugmug buttons (style, share, upload, buy, etc) to not work in my galleries. Either when logged in, or when logged out. I get a text list of a few items, but not the whole menu. If I remove the code, my nav bar goes crazy.

[IMG]file:///C:/Users/Emily/AppData/Local/Temp/moz-screenshot.png[/IMG][IMG]file:///C:/Users/Emily/AppData/Local/Temp/moz-screenshot-1.png[/IMG]On an unrelated nav bar note, I can't seem to get rid of the "highlight" on Home on my nav bar, even when I move to another section. (About, Portfolio, Blog).

Thank you in advance!
Emily

Originally Posted by CameraGirl Hi Allen, I'm using a different drop down nav bar (that I copied from my blog template) but have run into a problem i can't fix. I've isolated the code that is causing the problem, but do not know how to change it. (website: http://eehyndman.smugmug.com blog: http://eehyndman.blogspot.com) This part of the code: .nav ul { position:absolute; top:-999em; background-position: bottom; background-repeat: no-repeat; } .nav li { float:right; position:relative; } It causes the smugmug buttons (style, share, upload, buy, etc) to not work in my galleries. Either when logged in, or when logged out. I get a text list of a few items, but not the whole menu. If I remove the code, my nav bar goes crazy. [IMG]file:///C:/Users/Emily/AppData/Local/Temp/moz-screenshot.png[/IMG][IMG]file:///C:/Users/Emily/AppData/Local/Temp/moz-screenshot-1.png[/IMG]On an unrelated nav bar note, I can't seem to get rid of the "highlight" on Home on my nav bar, even when I move to another section. (About, Portfolio, Blog). Thank you in advance! Emily

Smugmug already uses the class name "nav" so will have to change
yours to something different in html and CSS. Like maybe "mynav" or
"navcontainer".

Originally Posted by Allen Smugmug already uses the class name "nav" so will have to change yours to something different in html and CSS. Like maybe "mynav" or "navcontainer".

Thanks Allen, I changed it to "mynav" and it worked perfectly!
Do you know why the "home" button on my navbar is always "on" (even if I'm on my "portfolio" page?

Thanks again!

Originally Posted by CameraGirl Thanks Allen, I changed it to "mynav" and it worked perfectly! Do you know why the "home" button on my navbar is always "on" (even if I'm on my "portfolio" page? Thanks again!

Nope, sorry have no idea, maybe someone else will chime in.

I'm so excited that I'm in the home stretch of designing my website! This forum and all the customization stickies have been invaluable. But I've reached a point where I'm stuck/stumped. Most of my issues pertain primarily to the navbar, so I'm posting those question(s) here.

1. When I look at my page in FF or Chrome or Safari, everything appears as I intend it. However, when I check it in IE8, the spacing on the navbar seems to get a little wonky and the last item on the bar gets moved underneath the first item (the gaps between items is much wider in IE8 than the other browsers). I think it's the padding for each cell? It looks like things are generally displayed a bit larger in IE? But if I change the cell padding, it messes up how the bar appears in the other three browsers. How do I effect a change that will only apply to IE? Is this the way I should proceed, or is there another, more effective way to get the bar to be formatted correctly regardless of browser?

2. I'm not sure if this is even possible, but I'd like to change my hover behavior so that the top list item is overlined, and changes color when hovering over that item, however, when hovering over lower level items within the list, I'd like the overline to remain above the top level item, but the color of the top level to revert to the regular menu color. I guess what I'm going for is that only the item over which the cursor is actually hovering would change color. Is this possible? And if so, how do I do it? I've tried a variety of tweaks, but none of them give the effect I've described.

3. For some reason, if there is a space in the lower level words (for instance: "about me"), they are being put into two lines. At first I assumed this was due to column-width issues, but if I put a long single word as the title, there is no problem. I've poured through the CSS and can't find a reason for this. And what really confuses me is that I can use a two-word phrase on the top level.

Thank you in advance for any help/insight you can provide!

Originally Posted by rokzmom I'm so excited that I'm in the home stretch of designing my website! This forum and all the customization stickies have been invaluable. But I've reached a point where I'm stuck/stumped. Most of my issues pertain primarily to the navbar, so I'm posting those question(s) here. 1. When I look at my page in FF or Chrome or Safari, everything appears as I intend it. However, when I check it in IE8, the spacing on the navbar seems to get a little wonky and the last item on the bar gets moved underneath the first item (the gaps between items is much wider in IE8 than the other browsers). I think it's the padding for each cell? It looks like things are generally displayed a bit larger in IE? But if I change the cell padding, it messes up how the bar appears in the other three browsers. How do I effect a change that will only apply to IE? Is this the way I should proceed, or is there another, more effective way to get the bar to be formatted correctly regardless of browser? 2. I'm not sure if this is even possible, but I'd like to change my hover behavior so that the top list item is overlined, and changes color when hovering over that item, however, when hovering over lower level items within the list, I'd like the overline to remain above the top level item, but the color of the top level to revert to the regular menu color. I guess what I'm going for is that only the item over which the cursor is actually hovering would change color. Is this possible? And if so, how do I do it? I've tried a variety of tweaks, but none of them give the effect I've described. 3. For some reason, if there is a space in the lower level words (for instance: "about me"), they are being put into two lines. At first I assumed this was due to column-width issues, but if I put a long single word as the title, there is no problem. I've poured through the CSS and can't find a reason for this. And what really confuses me is that I can use a two-word phrase on the top level. Thank you in advance for any help/insight you can provide!

This will get you started. See if other browsers behave. Got the
overline but still looking at changing main color when hovering drops.
Think I highlighted changes in red, not sure if I got them all.

/* 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;
   float:right;
   margin-top: 60px;  /* top R/L bottom */
   position:relative;    /* Make the container moveable */
   width:620px;          /* Main bar total width, minimize to center */
}

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

.menu ul ul {
   width:130px; 
}

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

      /* style the links for the top level */
.menu a, .menu a:visited {
   font-size:14pt;
   color:#b72727;
   text-decoration: none;
   text-align: center;
   background:none;
   border: none; 
   border-width:none; 
   font-family:arial;
   width:auto;            /* Defines the main box dimensions. */
   height:25px;           /*How tall your cells are */
   line-height:25px;      /*Adjust this to vertically center your text in each cell. Should be about                                                              the same as height. */
   padding: 0 10px;
   min-width: 80px;
}

      /* 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 second level background non-hover */
.menu ul ul a.drop, .menu ul ul a.drop:visited {background:none;}  /* if 3rd level exists */

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

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

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

 /* 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:25px;
   left:-10px;  /* centers drop text under main */
   width:130px;  /* Size of the daughter cells */
}


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

.menu ul ul ul li a {
   color:#b72727;
}

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


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

      /* style the second level links */
.menu ul ul a, .menu ul ul a:visited {
   color:#b72727;
   background:none;
   height:25px; 
   line-height:25px; 
   width:100px;
}

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

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

      /* main hover ?IE? */
.menu a:hover, .menu ul ul a:hover {
   color:#333366;
   background:none;
}

.menu ul ul a:hover {
   color:#91934a;
   background:none;
   border: none;
}


      /* main hover */
.menu :hover > a {
   color:#333366;
   background:none;
   border-top: 2px solid red;
}

     /*secondary hover */
.menu ul ul :hover > a {
   color:#91934a;
   background:none;
}

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

/* End Navbar Code */

Thanks, Allen--those changes seem to have gotten the bar spaced better on IE8, and looks relatively un-changed on FF and Chrome.
I love the "top-border" solution for the overline! Text-decoration wasn't working for me for some reason, and that gives the general look I'm going for. Would love to get the top level to change back to the red, but if that doesn't work, I'll just set it up to not change color at all on the top level, just the lower levels.

One additional thing, though: When I reduce the size of my browser window (regardless of browser I'm using), the navbar gets shifted below my banner. Aesthetically, it's not too bad, but it causes the drop down menu lists to fall into the slideshow pictures which I don't really like. Is there a way to link these two elements (banner and navbar) so that the navbar doesn't shift?

Thank you again for your help!!!