I want to change the color of only one of my menu items on my navbar. My web site is www.tonyspic.com

The item that I want to change is the "Colts Sports" when you hover over it is Orange and blue and when you drop down it turns to white and orange. Also the drop down is orange and I would like both positions to be blue with white letters. The fly outs are orange and I want them to be blue with white letters also. Can some one suggest something on this?

I have searched the customization but did not see any thing on this specific subject.

Thanks

Originally Posted by Hog Leg I want to change the color of only one of my menu items on my navbar. My web site is www.tonyspic.com The item that I want to change is the "Colts Sports" when you hover over it is Orange and blue and when you drop down it turns to white and orange. Also the drop down is orange and I would like both positions to be blue with white letters. The fly outs are orange and I want them to be blue with white letters also. Can some one suggest something on this? I have searched the customization but did not see any thing on this specific subject. Thanks

Sounds like colors are correct now but you want a different set of colors for "Colts Sports". Right?

Not quite sure what colors you want. There are four color states for each cell.
color (text) non-hover
color (text) hover
background non-hover
background hover

... and three buttons/cells in your case
main bar
dropdown
flyout

Try to define the 4 color states for each of these.

Originally Posted by Allen Sounds like colors are correct now but you want a different set of colors for "Colts Sports". Right? Not quite sure what colors you want. There are four color states for each cell. color (text) non-hover color (text) hover background non-hover background hover ... and three buttons/cells in your case main bar dropdown flyout Try to define the 4 color states for each of these.

Thanks for the reply Allen. I apologize for being confusing on this. I don't want to change any of the color my Navbar selection(Headers) except the one that says "Colts Sports" I want the ability to change the color on the dropdowns and flyout on that part of my Navbar only. Does this make sense?

Originally Posted by Hog Leg Thanks for the reply Allen. I apologize for being confusing on this. I don't want to change any of the color my Navbar selection(Headers) except the one that says "Colts Sports" I want the ability to change the color on the dropdowns and flyout on that part of my Navbar only. Does this make sense?

Yes it does, that part I got. I was confused with what colors for just that part. Will have
to add some specific classes to that part of the nav, I'll look at it.

Also to make it simpler to work on I'll use the latest CSS from post.

Originally Posted by Hog Leg ...

Here's the new version of CSS. Think I have all the colors correct. Next I will work on you specific drop.

/* 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: 820px;          /* 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 position */
.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:#0033FF;
   border:1px solid #FF630F;         /* optional */        
   border-width:1px 1px 1px 1px;   /* optional */
   font-size:10pt;
   font-family: Arial;
   width:110px;         /* Defines the main box dimensions. */
   height:20px;        /* How tall your cells are */
   line-height:20px;   /* vertical text alignment in cell */ 
   padding: 0 2px;    /* top/bottom R/L */
}

      /* main hover */
.menu a:hover, .menu :hover > a {
   color:#0033FF;
   background:#FF630F;
}

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

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

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

      /* style the second level links */
.menu ul ul a, .menu ul ul a:visited {
   color:white;
   background:#FF630F;
   height:auto; 
   line-height:20px; 
   width:110px;
}

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


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

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

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

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

      /* style the third level hover */
.menu ul ul ul a:hover {background:#0033FF;}
.menu ul ul ul :hover > a {background:#0033FF;}     /* 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:#FF630F;       /* hover 3rd > 4th */
   height:20px; 
   line-height:20px; 
   width:110px;
}


      /* ***** LEVEL 4 ***** LEVEL 4 ***** LEVEL 4 ***** */

      /* position the fourth level flyout menu */
.menu ul ul ul ul {
   left:130px; 
   top:0;
   width:130px;
   height: auto !important;
}

     /* 4th level non-hover */
.menu ul ul ul ul li a {
   color:white;
   width:150px;
}

      /* style the fourth level hover */
.menu ul ul ul ul a:hover {background:#0033FF;}
.menu ul ul ul ul :hover > a {background:#0033FF;}

      /* 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 Allen Here's the new version of CSS. Think I have all the colors correct. Next I will work on you specific drop. /* 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: 820px; /* 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 position */ .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:#0033FF; border:1px solid #FF630F; /* optional */ border-width:1px 1px 1px 1px; /* optional */ font-size:10pt; font-family: Arial; width:110px; /* Defines the main box dimensions. */ height:20px; /* How tall your cells are */ line-height:20px; /* vertical text alignment in cell */ padding: 0 2px; /* top/bottom R/L */ } /* main hover */ .menu a:hover, .menu :hover > a { color:#0033FF; background:#FF630F; } /* 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 positon 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:130px; /* Size of the daughter cells */ } /* style the second level background non-hover */ .menu ul ul a.drop, .menu ul ul a.drop:visited {background:#FF630F;} /* if 3rd level exists */ /* style the second level hover */ .menu ul ul a.drop:hover {background:#0033FF;} .menu ul ul :hover > a.drop {background:#0033FF;} /* style the second level links */ .menu ul ul a, .menu ul ul a:visited { color:white; background:#FF630F; height:auto; line-height:20px; width:110px; } .menu ul ul :hover > a.drop {background:#0033FF;} /* 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:white; background:#0033FF; } /* ***** LEVEL 3 ***** LEVEL 3 ***** LEVEL 3 ***** */ /* position the third level flyout menu */ .menu ul ul ul { left:115px; top:0; width:160px; height:auto; } .menu ul ul ul li a {color:white;} .menu ul ul ul li a:hover {color:white;} /* style the third level background */ .menu ul ul ul a, .menu ul ul ul a:visited {background:#FF630F;} /* not FF */ /* style the third level hover */ .menu ul ul ul a:hover {background:#0033FF;} .menu ul ul ul :hover > a {background:#0033FF;} /* 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:#FF630F; /* hover 3rd > 4th */ height:20px; line-height:20px; width:110px; } /* ***** LEVEL 4 ***** LEVEL 4 ***** LEVEL 4 ***** */ /* position the fourth level flyout menu */ .menu ul ul ul ul { left:130px; top:0; width:130px; height: auto !important; } /* 4th level non-hover */ .menu ul ul ul ul li a { color:white; width:150px; } /* style the fourth level hover */ .menu ul ul ul ul a:hover {background:#0033FF;} .menu ul ul ul ul :hover > a {background:#0033FF;} /* 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 */

Ok, I made the change and every thing look right to me. I will add the other when you send it. When you get a chance , if you could look at what I have put in to make sure I have put the code in the correct place i would appreciate it.

Originally Posted by Hog Leg Ok, I made the change and every thing look right to me. I will add the other when you send it. When you get a chance , if you could look at what I have put in to make sure I have put the code in the correct place i would appreciate it.

Add the red in your header

        <li><a class="drop" href="#nopick">Colts Sports
            <!--[if gte IE 7]><!--></a><!--<![endif]-->
            <!--[if lte IE 6]><table><tr><td><![endif]-->
            <ul class="coltsColors">
                <li><a href="/Colts%20Football"> FootBall </a></li>
                <li><a href="/Colts"> Band </a></li>
                <li><a class="drop" href="#nopick">BasketBall
                    <!--[if gte IE 7]><!--></a><!--<![endif]-->
                    <!--[if lte IE 6]><table><tr><td><![endif]-->
                    <ul class="coltsColors">
                        <li><a href="/Colts%20Basketball%20Boys">Colts</a></li>
...

New CSS. Changes in red. Change the background purple and pinks to your colors. The text colors can be figured out next.

/* 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: 820px;          /* 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 position */
.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:#0033FF;
   border:1px solid #FF630F;         /* optional */        
   border-width:1px 1px 1px 1px;   /* optional */
   font-size:10pt;
   font-family: Arial;
   width:110px;         /* Defines the main box dimensions. */
   height:20px;        /* How tall your cells are */
   line-height:20px;   /* vertical text alignment in cell */ 
   padding: 0 2px;    /* top/bottom R/L */
}

      /* main hover */
.menu a:hover, .menu :hover > a {
   color:#0033FF;
   background:#FF630F;
}

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

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


      /* style the second level hover */
.menu ul ul a.drop:hover {background:#0033FF;}
.menu ul ul :hover > a.drop {background:#0033FF;}
.menu ul ul.coltsColors a.drop:hover {background:pink;}
.menu ul ul.coltsColors :hover > a.drop {background:pink;}

      /* style the second level links */
.menu ul ul a, .menu ul ul a:visited {
   color:white;
   background:#FF630F;
   height:auto; 
   line-height:20px; 
   width:110px;
}
.menu ul ul.coltsColors a, .menu ul ul.coltsColors a:visited {
   color:white;
   background:purple;
}

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

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

      /* 2nd/3rd level hover */
.menu ul ul a:hover, .menu ul ul :hover > a {
   color:white;
   background:#0033FF;
}
.menu ul ul.coltsColors a:hover, .menu ul ul.coltsColors :hover > a {
   color:white;
   background:pink;
}


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

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

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

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

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

      /* style the third level links */
.menu ul ul ul a, .menu ul ul ul a:visited {
   color:white;              /* hover 2nd > 3rd & 4th */
   background:#FF630F;       /* hover 3rd > 4th */
   height:20px; 
   line-height:20px; 
   width:110px;
}

      /* 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 Add the red in your header <li><a class="drop" href="#nopick">Colts Sports <!--[if gte IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]--> <ul class="coltsColors"> <li><a href="/Colts%20Football"> FootBall </a></li> <li><a href="/Colts"> Band </a></li> <li><a class="drop" href="#nopick">BasketBall <!--[if gte IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]--> <ul class="coltsColors"> <li><a href="/Colts%20Basketball%20Boys">Colts</a></li> ... New CSS. Changes in red. Change the background purple and pinks to your colors. The text colors can be figured out next. /* 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: 820px; /* 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 position */ .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:#0033FF; border:1px solid #FF630F; /* optional */ border-width:1px 1px 1px 1px; /* optional */ font-size:10pt; font-family: Arial; width:110px; /* Defines the main box dimensions. */ height:20px; /* How tall your cells are */ line-height:20px; /* vertical text alignment in cell */ padding: 0 2px; /* top/bottom R/L */ } /* main hover */ .menu a:hover, .menu :hover > a { color:#0033FF; background:#FF630F; } /* 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 positon 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:130px; /* Size of the daughter cells */ } /* style the second level background non-hover */ .menu ul ul a.drop, .menu ul ul a.drop:visited {background:#FF630F;} /* if 3rd level exists */ .menu ul ul.coltsColors a.drop, .menu ul ul.coltsColors a.drop:visited {background:purple;} /* style the second level hover */ .menu ul ul a.drop:hover {background:#0033FF;} .menu ul ul :hover > a.drop {background:#0033FF;} .menu ul ul.coltsColors a.drop:hover {background:pink;} .menu ul ul.coltsColors :hover > a.drop {background:pink;} /* style the second level links */ .menu ul ul a, .menu ul ul a:visited { color:white; background:#FF630F; height:auto; line-height:20px; width:110px; } .menu ul ul.coltsColors a, .menu ul ul.coltsColors a:visited { color:white; background:purple; } .menu ul ul :hover > a.drop {background:#0033FF;} /* 2nd if 3rd level exists */ .menu ul ul.coltsColors :hover > a.drop {background:pink;} /* yet another hack for IE5.5 */ * html .menu ul ul a {width:120px; w\idth:120px;} /* 2nd/3rd level hover */ .menu ul ul a:hover, .menu ul ul :hover > a { color:white; background:#0033FF; } .menu ul ul.coltsColors a:hover, .menu ul ul.coltsColors :hover > a { color:white; background:pink; } /* ***** LEVEL 3 ***** LEVEL 3 ***** LEVEL 3 ***** */ /* position the third level flyout menu */ .menu ul ul ul { left:115px; top:0; width:160px; height:auto; } .menu ul ul ul li a {color:white;} .menu ul ul ul li a:hover {color:white;} /* style the third level background */ .menu ul ul ul a, .menu ul ul ul a:visited {background:#FF630F;} /* not FF */ .menu ul ul ul.coltsColors a, .menu ul ul ul.coltsColors a:visited {background:purple;} /* style the third level hover */ .menu ul ul ul a:hover {background:#0033FF;} .menu ul ul ul :hover > a {background:#0033FF;} /* 3rd (w/o 4th) 4th hover */ .menu ul ul ul.coltsColors a:hover {background:pink;} .menu ul ul ul.coltsColors :hover > a {background:pink;} /* style the third level links */ .menu ul ul ul a, .menu ul ul ul a:visited { color:white; /* hover 2nd > 3rd & 4th */ background:#FF630F; /* hover 3rd > 4th */ height:20px; line-height:20px; width:110px; } /* 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 */

Thanks Allen, I have adjusted everything but i am still having problems with the "Colt Sports" drop down color. Its and orange color. I can change it to any color but when I change it it changes all of the other Navbar menu items to the same as the color that it pick. I want to change the background color of just the one Drop down and all of the drops under that menu item. Please re look at my placement of my code . I may have it place incorrectly.

Originally Posted by Hog Leg Thanks Allen, I have adjusted everything but i am still having problems with the "Colt Sports" drop down color. Its and orange color. I can change it to any color but when I change it it changes all of the other Navbar menu items to the same as the color that it pick. I want to change the background color of just the one Drop down and all of the drops under that menu item. Please re look at my placement of my code . I may have it place incorrectly.

For every thing under "Colt Sports" what colors do you want? I need these four for a complete picture.

color (text) non-hover
color (text) hover
background non-hover
background hover

Originally Posted by Allen For every thing under "Colt Sports" what colors do you want? I need these four for a complete picture. color (text) non-hover=white color (text) hover =white background non-hover =dark blue background hover = bright blue

At least I think thats what I want

Originally Posted by Hog Leg At least I think thats what I want

How's this?

/* 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: 820px;          /* 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 position */
.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:#0033FF;
   border:1px solid #FF630F;         /* optional */        
   border-width:1px 1px 1px 1px;   /* optional */
   font-size:10pt;
   font-family: Arial;
   width:110px;         /* Defines the main box dimensions. */
   height:20px;        /* How tall your cells are */
   line-height:20px;   /* vertical text alignment in cell */ 
   padding: 0 2px;    /* top/bottom R/L */
}

      /* main hover */
.menu a:hover, .menu :hover > a {
   color:#0033FF;
   background:#FF630F;
}

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

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


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

      /* style the second level links */
.menu ul ul a, .menu ul ul a:visited {
   color:white;
   background:#FF630F;
   height:auto; 
   line-height:20px; 
   width:110px;
}
.menu ul ul.coltsColors a, .menu ul ul.coltsColors a:visited {
   color:white;
   background:#00009C;
}

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

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

      /* 2nd/3rd level hover */
.menu ul ul a:hover, .menu ul ul :hover > a {
   color:white;
   background:#0033FF;
}
.menu ul ul.coltsColors a:hover, .menu ul ul.coltsColors :hover > a {
   color:white;
   background:#0033FF;
}


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

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

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

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

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

      /* style the third level links */
.menu ul ul ul a, .menu ul ul ul a:visited {
   color:white;              /* hover 2nd > 3rd & 4th */
   background:#FF630F;       /* hover 3rd > 4th */
   height:20px; 
   line-height:20px; 
   width:110px;
}

      /* 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 How's this? /* 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: 820px; /* 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 position */ .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:#0033FF; border:1px solid #FF630F; /* optional */ border-width:1px 1px 1px 1px; /* optional */ font-size:10pt; font-family: Arial; width:110px; /* Defines the main box dimensions. */ height:20px; /* How tall your cells are */ line-height:20px; /* vertical text alignment in cell */ padding: 0 2px; /* top/bottom R/L */ } /* main hover */ .menu a:hover, .menu :hover > a { color:#0033FF; background:#FF630F; } /* 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 positon 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:130px; /* Size of the daughter cells */ } /* style the second level background non-hover */ .menu ul ul a.drop, .menu ul ul a.drop:visited {background:#FF630F;} /* if 3rd level exists */ .menu ul ul.coltsColors a.drop, .menu ul ul.coltsColors a.drop:visited {background:#00009C;} /* style the second level hover */ .menu ul ul a.drop:hover {background:#0033FF;} .menu ul ul :hover > a.drop {background:#0033FF;} .menu ul ul.coltsColors a.drop:hover {background:#0033FF;} .menu ul ul.coltsColors :hover > a.drop {background:#0033FF;} /* style the second level links */ .menu ul ul a, .menu ul ul a:visited { color:white; background:#FF630F; height:auto; line-height:20px; width:110px; } .menu ul ul.coltsColors a, .menu ul ul.coltsColors a:visited { color:white; background:#00009C; } .menu ul ul :hover > a.drop {background:#0033FF;} /* 2nd if 3rd level exists */ .menu ul ul.coltsColors :hover > a.drop {background:#0033FF;} /* yet another hack for IE5.5 */ * html .menu ul ul a {width:120px; w\idth:120px;} /* 2nd/3rd level hover */ .menu ul ul a:hover, .menu ul ul :hover > a { color:white; background:#0033FF; } .menu ul ul.coltsColors a:hover, .menu ul ul.coltsColors :hover > a { color:white; background:#0033FF; } /* ***** LEVEL 3 ***** LEVEL 3 ***** LEVEL 3 ***** */ /* position the third level flyout menu */ .menu ul ul ul { left:115px; top:0; width:160px; height:auto; } .menu ul ul ul li a {color:white;} .menu ul ul ul li a:hover {color:white;} /* style the third level background */ .menu ul ul ul a, .menu ul ul ul a:visited {background:#FF630F;} /* not FF */ .menu ul ul ul.coltsColors a, .menu ul ul ul.coltsColors a:visited {background:#00009C;} /* style the third level hover */ .menu ul ul ul a:hover {background:#0033FF;} .menu ul ul ul :hover > a {background:#0033FF;} /* 3rd (w/o 4th) 4th hover */ .menu ul ul ul.coltsColors a:hover {background:#0033FF;} .menu ul ul ul.coltsColors :hover > a {background:#0033FF;} /* style the third level links */ .menu ul ul ul a, .menu ul ul ul a:visited { color:white; /* hover 2nd > 3rd & 4th */ background:#FF630F; /* hover 3rd > 4th */ height:20px; line-height:20px; width:110px; } /* 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 */

I believe I can work with this Allen. Thanks for your hard work YOU guys are the best!!!