Allen,

Thanks as always for your assistance. That cleaned up most everything. There are three remaining points I would appreciate some help to address:

1. How can I change the right margin of the "menu" container so the links are closer to the right side of the page, similar to how the company name is flush with the left?

2. On mouse hover, my drop down background is becoming black, I would like it white..

3. How can you insert spacers (lines) between each drop down list item?

Thanks very much again.

A

Originally Posted by Allen You are missing this at the bottom of the menu CSS. You can remove the 3rd and 4th levels but need this at the bottom.

Massaged the code a bit more. I solved #2 however raises a new question: How do I get the drop down links foreground to change to grey on mouse hover?

Also, I noticed there is not equal spacing between the main level menu links. The inner two are closer together than the outer two.

Thanks kindly.

Originally Posted by FTLImages Allen, Thanks as always for your assistance. That cleaned up most everything. There are three remaining points I would appreciate some help to address: 1. How can I change the right margin of the "menu" container so the links are closer to the right side of the page, similar to how the company name is flush with the left? 2. On mouse hover, my drop down background is becoming black, I would like it white.. 3. How can you insert spacers (lines) between each drop down list item? Thanks very much again. A

Originally Posted by FTLImages Massaged the code a bit more. I solved #2 however raises a new question: How do I get the drop down links foreground to change to grey on mouse hover? Also, I noticed there is not equal spacing between the main level menu links. The inner two are closer together than the outer two. Thanks kindly.

Missing the red rules

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

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

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

Comment out the min-width

/* style the links for the top level */

.menu a, .menu a:visited {
   display:block;
   text-decoration:none;  /* none, overline, underline */
   color:white;
   background:none;
   font-size:14pt;
   font-variant: small-caps;
   font-family: 'Lucida Handwriting';
   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 */
}

Allen,

Thanks again for your help.

A few finishing touches I could use some help with.

1. Lines (separators) dividing each link in the gallery drop down menu.

2. Where does the CSS for box-shadow get inserted to make a drop shadow?

3. I tried putting in the positioning for the container left: 75px which works great for Chrome. It moves the main level links all the way to the right side where they should be. However, on IE, it moves them so far they are off the screen. Is there an IF statement to be used if the browser detected is IE and therefore do not apply the left rule?


Thanks again very kindly!

Adam
www.ftlimages.com

Originally Posted by Allen Missing the red rules Comment out the min-width

Originally Posted by FTLImages ... 1. Lines (separators) dividing each link in the gallery drop down menu....

This red rule adds a top border to each.

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

.menu ul ul li {border-top: 1px solid #ccc;}