Originally Posted by twors Thanks Allen I will give that a try.

Allen I believe I took care of all the . menu locations I could see that had a background set to "none", and then some that I found that didn't have any "background:" at all. I am still having an issue with the drop down disappearing as you mouse over it in IE8. I cant check IE7 anymore may be still having the problem there also. It seems if I scroll real fast and hit the bottom nav links just right I can get to them but if I try to just scroll like a "normal" person they disappear. could you look at the code again for me and see if there is something I am missing... I looked on the hacks and API page and didn't see anything for IE8??? Firefox is working just like it is suppose to....

Thanks for the help

Originally Posted by twors Allen I believe I took care of all the . menu locations I could see that had a background set to "none", and then some that I found that didn't have any "background:" at all. I am still having an issue with the drop down disappearing as you mouse over it in IE8. I cant check IE7 anymore may be still having the problem there also. It seems if I scroll real fast and hit the bottom nav links just right I can get to them but if I try to just scroll like a "normal" person they disappear. could you look at the code again for me and see if there is something I am missing... I looked on the hacks and API page and didn't see anything for IE8??? Firefox is working just like it is suppose to.... Thanks for the help

I switched from IE 9 to 7 & 8 using the developer tools and saw no problem.

Hi, Allen,

Thanks for writing up this code. I would like to use this code for a dropdown menu on my site: http://gallery.kimashcraft.com/, so my smugmug side matches my wordpress side (http://kimashcraft.com). Is that possible? If so, can you maybe get one (Info or Investment) started for me so I can see what needs to go where in the code? I would really appreciate it more than you will ever know.

Thanks!

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

Originally Posted by Kimbo6891 Hi, Allen, Thanks for writing up this code. I would like to use this code for a dropdown menu on my site: http://gallery.kimashcraft.com/, so my smugmug side matches my wordpress side (http://kimashcraft.com). Is that possible? If so, can you maybe get one (Info or Investment) started for me so I can see what needs to go where in the code? I would really appreciate it more than you will ever know. Thanks!

Add the missing closing } here while I'm looking at your nav. Might take a while because I'm watching a football game.

#mysearch {
text-align: right;
padding-right: 200px;}

Originally Posted by Kimbo6891 Hi, Allen, Thanks for writing up this code. I would like to use this code for a dropdown menu on my site: http://gallery.kimashcraft.com/, so my smugmug side matches my wordpress side (http://kimashcraft.com). Is that possible? If so, can you maybe get one (Info or Investment) started for me so I can see what needs to go where in the code? I would really appreciate it more than you will ever know. Thanks!

Here's a start.

<div class="menu">
<ul>
   <li><a href="/">Home</a></li>
   <li><a href="#noclick">Galleries
       <!--[if gte IE 7]><!--></a><!--<![endif]-->
       <!--[if lte IE 6]><table><tr><td><![endif]-->
       <ul>
           <li><a href="Link">drop</a></li>
           <li><a href="Link">drop</a></li>
       </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]-->
   </li>
   <li><a class="drop" href="#noclick">Info
       <!--[if gte IE 7]><!--></a><!--<![endif]-->
       <!--[if lte IE 6]><table><tr><td><![endif]-->
       <ul>
           <li><a href="Link">drop</a></li>
           <li><a href="Link">drop</a></li>
       </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]-->
   </li>
   <li><a href="Link">Menu 1</a></li>
   <li><a href="Link">Menu 1</a></li>
   <li><a href="Link">Menu 1</a></li>
</ul>
</div>

Allen,

I appreciate you doing this for me, but I guess I'm just not following. I know I need to CSS part in there, too, so it formats correctly, but I don't know that I can do this.

Originally Posted by Allen Here's a start. <div class="menu"> <ul> <li><a href="/">Home</a></li> <li><a href="#noclick">Galleries <!--[if gte IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]--> <ul> <li><a href="Link">drop</a></li> <li><a href="Link">drop</a></li> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--> </li> <li><a class="drop" href="#noclick">Info <!--[if gte IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]--> <ul> <li><a href="Link">drop</a></li> <li><a href="Link">drop</a></li> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--> </li> <li><a href="Link">Menu 1</a></li> <li><a href="Link">Menu 1</a></li> <li><a href="Link">Menu 1</a></li> </ul> </div>

Originally Posted by Kimbo6891 I appreciate you doing this for me, but I guess I'm just not following. I know I need to CSS part in there, too, so it formats correctly, but I don't know that I can do this.

Start with this and I can help modify what's needed.

/* 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 40px;  /* top R/L bottom */
   width:500px;          /* 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;
   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:#47A0C0;
   background:white;
}

      /* 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:90px;    /* Size of the daughter cells */
}

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

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

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

.menu ul ul :hover > a.drop  {background:white;}   /* 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:#47A0C0;
   background:white;
}

      /* make the 2nd level visible when hover on 1st level */
.menu ul :hover ul {visibility:visible;}

/* End Navbar Code */

Thanks, Allen,

I have placed both pieces of code in the appropriate places. If you can direct me on what goes where, I might be able to follow, but I'm not making any promises

Originally Posted by Allen Start with this and I can help modify what's needed. /* 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 40px; /* top R/L bottom */ width:500px; /* 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; 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:#47A0C0; background:white; } /* 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:90px; /* Size of the daughter cells */ } /* style the second level background non-hover */ .menu ul ul a.drop, .menu ul ul a.drop:visited {background:white;} /* if 3rd level exists */ /* style the second level hover */ .menu ul ul a.drop:hover {background:white;} .menu ul ul :hover > a.drop {background:white;} /* style the second level links */ .menu ul ul a, .menu ul ul a:visited { color:#000; background:white; height:20px; line-height:20px; width:90px; text-align:left; } .menu ul ul :hover > a.drop {background:white;} /* 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:#47A0C0; background:white; } /* make the 2nd level visible when hover on 1st level */ .menu ul :hover ul {visibility:visible;} /* End Navbar Code */

Originally Posted by Kimbo6891 Thanks, Allen, I have placed both pieces of code in the appropriate places. If you can direct me on what goes where, I might be able to follow, but I'm not making any promises

Next step is to modify the html to get all you links and any more main buttons added.

I figured part of it out as far as putting the links in for the first part that you had already given me. Too bad I'm already lost for the rest of it. Also, I did test it and the part I entered actually works, however the alignment is a little off due to the font size and spacing. I know that is in the CSS, but I can't figure that part out either.

Originally Posted by Allen Next step is to modify the html to get all you links and any more main buttons added.

I DID IT!!!! THANKS FOR YOUR HELP!!!!!

Originally Posted by kimbo6891 i figured part of it out as far as putting the links in for the first part that you had already given me. Too bad i'm already lost for the rest of it. Also, i did test it and the part i entered actually works, however the alignment is a little off due to the font size and spacing. I know that is in the css, but i can't figure that part out either.

Hey Allen,
I am trying to get one drop down styled properly.

the page is http://www.ericandjanaphotography.co...5601593_9SS7gL

the galleries tab is the drop down. I have a margin property set in the main bar, to align it with the background image. but it also results in a margin between the two drop down links. Removing the margin property basically just stacked directly over top of where it says galleries. I would actually like to preserve the spacing so the first link "families" appears right at the bottom of the grey bar, but without the gap between "families" and "newborns"

.familiesmenu { z-index:99; margin: auto; /* top R/L bottom */ position: relative; /* Make the container moveable */ width: 915px; /* Main bar total width, minimize to center */ padding-left: auto; } /* remove all the bullets, borders and padding from the default list styling */ .familiesmenu 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 position */ .familiesmenu li {float:left; text-align:center; width:auto; position:relative; padding: 0; } /* style the links for the top level */ .familiesmenu a, .familiesmenu a:visited { display:block; font-size:16pt; text-decoration:none; color:#ffffff; font-family:"Champagne & Limousines"; font-style:normal; width:50; /* Defines the main box dimensions. */ height:40px; /*How tall your cells are */ line-height:0px; /*Adjust this to vertically center your text in each cell. Should be about the same as height. */ padding: 0px 5px; min-width: 50px; max-width: 125px; margin-top: 25px; margin-right:25px; margin-left:25px; } /* a hack so that IE5.5 faulty box model is corrected */ * html .familiesmenu a, * html .familiesmenu a:visited {width:130px; w\idth:130px;} /* ***** LEVEL 2 ***** LEVEL 2 ***** LEVEL 2 ***** */ /* another hack for IE5.5 */ * html .familiesmenu 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 */ .familiesmenu 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 */ margin:0px; } /* style the second level background non-hover */ .familiesmenu ul ul a.drop, .familiesmenu ul ul a.drop:visited {background:yellow;} /* if 3rd level exists */ /* style the second level hover */ .familiesmenu ul ul a.drop:hover {background:#e0e0e0;} .familiesmenu ul ul :hover > a.drop {background:#e0e0e0;} /* style the second level links */ .familiesmenu ul ul a, .familiesmenu ul ul a:visited { color:#ffffff; background:#e0e0e0; height:20px; line-height:20px; width:150px; } .familiesmenu ul ul :hover > a.drop {background:#ffffff;} /* 2nd if 3rd level exists */ /* yet another hack for IE5.5 */ * html .familiesmenu ul ul a {width:120px; w\idth:120px;} /* 2nd level hover */ .familiesmenu ul ul a:hover, .familiesmenu ul ul :hover > a { color:#ffffff; background:#e0e0e0; }

Originally Posted by photography-by-jana Hey Allen, I am trying to get one drop down styled properly. the page is http://www.ericandjanaphotography.co...5601593_9SS7gL the galleries tab is the drop down. I have a margin property set in the main bar, to align it with the background image. but it also results in a margin between the two drop down links. Removing the margin property basically just stacked directly over top of where it says galleries. I would actually like to preserve the spacing so the first link "families" appears right at the bottom of the grey bar, but without the gap between "families" and "newborns"

Fix these in your html, remove red. Looking for more errors.

<li><a class="drop" href="/Other/Pricing/20835837_7xHKR7" title="">Pricing<!-- no</a></li>on drop lines -->

<li><a class="drop" href="#link" title="">Galleries<!-- no </a></li> on drop lines -->

<li><a class="drop" href="/Families/Community/25601608_QxLJHJ" title="">Community<!-- no </a></li> on drop lines -->


in CSS

*/ /*--------------------------------------------
End of header/Navbar code */

*/ /*----------------------------------------------------------------------
Start of JFriend HTML5 Slideshow CSS */

Originally Posted by photography-by-jana ...

I'd remove the myHeader div, it's creating a huge gap at the top. That gap/spacing can be
configured with margin-top in the banner CSS.

<div id="myHeader">
<div id="myBanner"></div>
</div>


To keep things straight and add info I'd add the red at the end of your html.

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

Originally Posted by photography-by-jana Hey Allen, I am trying to get one drop down styled properly. the page is http://www.ericandjanaphotography.co...5601593_9SS7gL the galleries tab is the drop down. I have a margin property set in the main bar, to align it with the background image. but it also results in a margin between the two drop down links. Removing the margin property basically just stacked directly over top of where it says galleries. I would actually like to preserve the spacing so the first link "families" appears right at the bottom of the grey bar, but without the gap between "families" and "newborns"

One thing I need is a link to a page showing each of your menus.

Originally Posted by Allen One thing I need is a link to a page showing each of your menus.

wow- thanks Allen,
looks like I had a pretty good mess going.
I'll get to work on cleaning that stuff up. I'm not sure the older menu's will be used any more, but I didn't want to delete them until we had the newer stuff straight. If I can get this one to work properly, I think I'll be good.

the one I am primarily using now is .familiesmenu

thanks again.

http://www.ericandjanaphotography.co...5601593_9SS7gL

Hi...sorry I am not too techy...i tried to copy paste the css code but i can't make it work. can you help me how and what i should post if i need the drop 1 lvl 2 and drop 2 lvl 2 for main 2 and main 3 nav bars.

thanks in advance

Originally Posted by iamvin Hi...sorry I am not too techy...i tried to copy paste the css code but i can't make it work. can you help me how and what i should post if i need the drop 1 lvl 2 and drop 2 lvl 2 for main 2 and main 3 nav bars. thanks in advance

Got a link to your site?

One more quick question. I added in a few things on my nav bar and actually didn't break anything. I want three of the links to open in a separate window. Can you tell me how to modify this code to work like that?

Thanks!

Originally Posted by Kimbo6891 I figured part of it out as far as putting the links in for the first part that you had already given me. Too bad I'm already lost for the rest of it. Also, I did test it and the part I entered actually works, however the alignment is a little off due to the font size and spacing. I know that is in the CSS, but I can't figure that part out either.

Originally Posted by Kimbo6891 One more quick question. I added in a few things on my nav bar and actually didn't break anything. I want three of the links to open in a separate window. Can you tell me how to modify this code to work like that? Thanks!

Add the red.

.... href="http://kimashcraft.com/about-kim/" target="_blank">About Kim</a></li>