CSS Menu Help!

[mannyotr]

Please help me. This is driving me crazy.

I am getting a problem in IE and I can't seem to figure out how to fix it. Of course, it works just fine in Firefox, but not IE.

In IE, go to to this page (http://www.mycfar.com). On the horizontal drop-down menu, go to "Guides." Then scroll through the three drop-down options and back up. Notice how the 3rd level menu suddenly dissapears behind the 2nd level menu?

Here's the portion of my CSS file controling the menu:
/********** LAYOUT - HEADER **********/
#header {background: #ffffff;
margin-top: 10px;
margin-bottom: 25px;
padding: 0 0 8px;}

img.headerimg {margin-left: 25px;}

/** NAV - top horizontal nav **/
#nav,
#nav ul
{padding: 0;
margin: 0;
list-style: none}

#nav {height:1.5em;
font: 80% arial;
margin-top: 1em;
margin-left: 75px;}

#nav li {position:relative;
float: left;
width: auto;
display:block;
margin: 0;
padding:0}

#nav a
{display: block;
padding: 3px 10px 2px;
border-bottom: 1px solid rgb(98,61,15);
border-top: 1px solid rgb(98,61,15);}

/************* 2nd tier *************/
#nav li ul {width: 15em;
position: absolute;
left: -999em;
background: #ffffff}

#nav li:hover ul,
#nav li.sfhover ul
{left: 10px;
z-index:55555}

#nav li li {background:#9BCD9B;
float:none;
border: 1px solid rgb(98,61,15);
border-top: none;
padding-left: 0}

#nav li li a,
#nav li li a:link,
#nav li li a:visited,
#nav li li a:hover
{color:#000;
padding: 3px 10px;
border-bottom: none;
border-top: none;}

#nav li li a:hover {color: #000;
background: #FFDAB9;}

#nav li.active {background: #FFDAB9;}
#nav li.active a {color: #000000}

/************* 3rd tier *************/
#nav li ul ul {width: 30em;
font-size: 100%;
margin-left: 7em;
margin-top: -.7em}

#nav li:hover ul ul,
#nav li.sfhover ul ul
{left: -999em;}

#nav li li:hover ul,
#nav li li.sfhover ul
{left: auto;}

#nav li li li
{background: #f6f6f6;
border-top: 1px solid #fff;}

#nav li li li a,
#nav li li li a:link,
#nav li li li a:visited,
#nav li li li a:hover
{color: #006400}

/************* 4th tier *************/
#nav li ul ul ul{width: 30em;}

#nav li:hover ul ul ul,
#nav li.sfhover ul ul ul
{left: -999em;}

#nav li li li:hover ul,
#nav li li li.sfhover ul
{left: auto;}

#nav li li li li {background: #FFDAB9;}

#nav li li li li a:hover {color: #000;
background: #9BCD9B;}

Please help me!

Thanks!

Manny

[ronaldb66]

I haven't ploughed through your style sheet in much detail, but you seem to run into all sorts of problems with the specificity of lower menu level selectors; that, and z-index.
Since IE < 7 doesn't understand more advanced combinators , it may be a good idea to add classes to lower level menu sections to enable selectors to target the appropriate elements.

Also consider positioning the third level menu items next to the second ones instead of partially overlapping them; if you run into space problems, shorten the menu items or run them over more then one line.