Why does my CSS style work in firefox but not in IE

[chobo2]

Hi

 

I am having a problem with my CSS style. It is a menu that has drop down columns and when you hover over them they will drop down. This works perfectly in Firefox but in when I try it out in IE(6 or 7) the menu will appear but if you however over it nothing drops down and I can't figure out why.

 

#menu {
top:5px;
width: 8.87em; /* set width of menu */
background: #eee;
width: 100%;
} 

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

#menu ul ul {
position: absolute;
z-index: 1;
}

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

/* style, color and size links and headings to suit */
#menu a, #menu h2 {
font: bold 11px/16px arial;
display: block;
border-width: 1px;
border-style: solid;
border-color: #ccc #888 #555 #bbb;
margin: 0;
padding: 2px 3px;
}

#menu h2 {
color: #fff;
background: #000;
text-transform: uppercase;
}

#menu a {
color: #000;
background: #efefef;
text-decoration: none;
}

#menu a:hover {
color: #a00;
background: #fff;
}

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

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

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

#menu ul {
list-style: none;
margin: 0;
padding: 0;
width: 8.87em;
float: left;
}

div.container{
position:relative;
top:0px;
left:0px;
width:995px;
height:auto; 
}

#login{
position:absolute;
top:300px;
left:745px;
height: auto;
width:240px;
font: bold 11px/16px arial;	
}

#content{
position:absolute;
top:300px;
left:0px;
height: auto;
width:695px;
margin:0 .25em;
padding: 5px 15px; 
font: bold 11px/16px arial;	
border: 1px solid black; 
}
#content h1, h2 {
font-weight: bolder; 
}

#banner{
position:absolute;
top:0px;
left:0px;
height: auto;
width:1000px;
}

 

[ToonMariner]

IE doesn't do pure css drop downs very well. Google 'suckerfish' and you will get a boat load of solutions (a list apart has the original). Bottom line - you'll need some javascript to get IE to play ball so make sure what ever you do - make sure it degrades well.

[Copyright]

IE6 does not suport the :hoover pseudoclass for other elements except <a>, therefore li:hover is not interperted by IE6, but you can use a javascript library such as IE7 library that will make IE6 recognize :hover pseudoclass.

 

The other option is to do some nasty javascript trick like: show/hide menu on onmouseover/onmouseout events.

 

 

Later.

[chobo2]

IE6 does not suport the :hoover pseudoclass for other elements except <a>, therefore li:hover is not interperted by IE6, but you can use a javascript library such as IE7 library that will make IE6 recognize :hover pseudoclass.

 

The other option is to do some nasty javascript trick like: show/hide menu on onmouseover/onmouseout events.

 

 

Later.

 

My menu does not work in IE 7 either.... So not sure if this will help.