Need help with multiple nav menus and weird offset in IE

[christiela]

Hi, I’m currently trying to recode the navigation portions of my company’s site from javascript to CSS, but I’m not allowed to alter the design very much…I have managed to code both menus on the page into CSS, you can see it here
http://www.ea-inc.com/Testing/index.shtml.

It seems to work fine in Firefox but when it’s in IE, the sub menu for the horizontal drop-down menu offsets to the right, and layers under the other vertical menu. I’ve tried it on its own and it has the same effect in IE 7. Tried everything I could think of already but still it’s like this. If anyone can give me some help, it would be appreciated greatly!

this is the code for the horizontal drop down..

Code:

/* CSS Document */

#menu2 {
width: 100%;
float:left;
background: #333;
}

#menu2 ul {
list-style: none;
margin: 0;
padding: 0;
float:left;
text-align:left;
}

ul.home {
width: 4em;
}

ul.about {
width:8em;
}

ul.careers {
width:8em;
}

ul.contact {
width:6em;
}

ul.sitemap {
width:6em;
}

ul.break {
width:0.4em;
height:40px;
color: #fff;
background-color: #bb0022;
padding-top:10px;
}

#menu2 a {
font: 11px/16px arial, helvetica, sans-serif;
display: block;
margin: 0;
padding: 12px 6px;
color: #fff;
background: #bb0022;
text-decoration:none;
vertical-align:middle;
}

#menu2 a:hover {
color: #FFF;
text-decoration: underline;
background: #dd0022;
}

#menu2 li {
position: relative;
}

#menu2 ul ul ul {
position: absolute;
top: 0;
left: 100%;
}

#menu2 ul ul {
position: absolute;
z-index: 500;
}

div#menu2 ul ul {
display: none;
}

div#menu2 ul li:hover ul
{display: block;
width:100%
}

and this is for the vertical one, just in case it’s needed…

Code:

/* CSS Document */

#menu {
width: 14em; /* set width of menu */
background: #fff;
font: 10px/16px Verdana, Arial, Helvetica, sans-serif;
}

#menu ul { /* remove bullets and list indents */
list-style: none;
margin: 0;
padding: 0;
}

#menu a {
display: block;
border-width: 1px;
border-style: solid;
border-color: #FFF #FFF #FFF #FFF;
margin: 0;
padding: 4px 3px;
color: #1D5EB7;
background: #efefef;
text-decoration: none;
}

#menu a:hover {
color: #1D5EB7;
background: #CCCCCC;
}

#menu li {
/* make the list elements a containing block for the nested lists */
position: relative;
}

#menu ul ul {
position: absolute;
top: 0;
left: 100%; /* to position them to the right of their containing block */
width: 18em; /* width is based on the containing block */
}

#menu ul ul ul {
position: absolute;
top: 0;
left: 100%; /* to position them to the right of their containing block */
width: 19em; /* width is based on the containing block */
}

div#menu ul ul,
div#menu ul li:hover ul ul
{display:none;}

div#menu ul li:hover ul,
div#menu ul ul li:hover ul
{display: block;}

div#menu ul ul ul,
div#menu ul ul li:hover ul ul
{display: none;}

div#menu ul ul li:hover ul,
div#menu ul ul ul li:hover ul
{display: block;}

[christiela]

Okay, after reading a bunch of sites about z-index I finally got the overlap part working…but i’m still lost on the offset in IE…please help?

This is the change made to the horizontal menu that solved the overlapping issue

Code:

#menu2 li {
position: relative;
z-index: 1000;
}

[christiela]

Could someone help me out here? Please, i really need some idea on this…thanks..

[TheDoc]

It’s very very early in the morning for people in North America, and people in Europe should just be getting into work, a little patience is needed!

I’ll have a look when I get in to work in the morning if noone else nabs this by then.

[tbwcf]

I haven’t got a web developer bar for ie on my test machine (normally use a mac) but it looks to me that ie is applying margin to your list items, you have margin:0; padding:0; on your ul but not your li, perhaps give that a go….
#menu ul li {margin:0; padding:0;}

Hope that helps

[TheDoc]

I see the problem you’re having, but honestly have nary a clue as to why it’s happening. I feel like I just had a problem like this but I can’t quite put my finger on it.

As a side note:

You should really be structuring the nave like this:

Code:

• Home
• Other
  • Dropdown1
  • Dropdown2
• Jiggins

[Author]

Posts