css menu works perfect in firefox but does not display in IE

[bookouri]

I have a verticle menu that works exactly like i want in firefox, displaing down the left side of the page, but in IE only one list item displays and its over on the top middle of the page and I cant figure out how to get ie to work right with it.

any chance anybody could tell me what might not be IE compatible here??

#cm-nav li a.arrow {background-image: url(arrow-right.gif)}

ul#cm-nav ,
ul#cm-nav ul {
border-bottom: black 0px solid;
list-style-type: none;
margin: 0px;
list-style-image: none;
border-right: black 0px solid;
padding: 0px;

}

ul#cm-nav li {
position: relative;
list-style-type: none;
margin: auto;
list-style-image: none;
padding: 0px;
top:-28px;
left:30px;
width:200px;

}

ul#cm-nav li li {
width: auto;
float: none;

}

#cm-nav a {
text-align: left;
border-left: black 1px solid;
display: block;
font-family: 'Arial Black', Gadget, sans-serif;
white-space: nowrap;
background: black;
color: white;
font-size: 12pt;
border-top: black 1px solid;
text-decoration: none;
padding: 5px;


}

#cm-nav a:focus {
outline-style: none;
outline-color: invert;
outline-width: medium
}

#cm-nav a.no-click {cursor: default}

#cm-nav > li > a ,
#cm-nav > li > a.arrow {padding-right: 4px}

.arrow-pad#cm-nav > li > a ,
#cm-nav ul.arrow-pad > li > a {padding-right: 11px}

#cm-nav li a.arrow ,
#cm-nav > li > a.arrow {
background-repeat: no-repeat;
background-position: right 50%
}

#cm-nav li:hover > a {
background-color: blue;
color: white;

}

#cm-nav li ul ,
#cm-nav li:hover ul ul ,
#cm-nav li:hover ul ul ul ,
#cm-nav li:hover ul ul ul ul ,
#cm-nav li:hover ul ul ul ul ul ,
#cm-nav li:hover ul ul ul ul ul ul ,
#cm-nav li:hover ul ul ul ul ul ul ul ,
#cm-nav li:hover ul ul ul ul ul ul ul ul ,
#cm-nav li:hover ul ul ul ul ul ul ul ul ul ,
#cm-nav li:hover ul ul ul ul ul ul ul ul ul ul ,
#cm-nav li:hover ul ul ul ul ul ul ul ul ul ul ul ,
#cm-nav li:hover ul ul ul ul ul ul ul ul ul ul ul ul ,
#cm-nav li:hover ul ul ul ul ul ul ul ul ul ul ul ul ul ,
#cm-nav li:hover ul ul ul ul ul ul ul ul ul ul ul ul ul ul ,
#cm-nav li:hover ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ,
#cm-nav li:hover ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ,
#cm-nav li:hover ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ,
#cm-nav li:hover ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ,
#cm-nav li:hover ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ,
#cm-nav li:hover ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ,
#cm-nav li:hover ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul {
z-index: 999;
position: absolute;
display: none;
top:40px;
left:-45px;
width:200px;
}

#cm-nav li:hover ul ,
#cm-nav li li:hover ul ,
#cm-nav li li li:hover ul ,
#cm-nav li li li li:hover ul ,
#cm-nav li li li li li:hover ul ,
#cm-nav li li li li li li:hover ul ,
#cm-nav li li li li li li li:hover ul ,
#cm-nav li li li li li li li li:hover ul ,
#cm-nav li li li li li li li li li:hover ul ,
#cm-nav li li li li li li li li li li:hover ul ,
#cm-nav li li li li li li li li li li li:hover ul ,
#cm-nav li li li li li li li li li li li li:hover ul ,
#cm-nav li li li li li li li li li li li li li:hover ul ,
#cm-nav li li li li li li li li li li li li li li:hover ul ,
#cm-nav li li li li li li li li li li li li li li li:hover ul ,
#cm-nav li li li li li li li li li li li li li li li li:hover ul ,
#cm-nav li li li li li li li li li li li li li li li li li:hover ul ,
#cm-nav li li li li li li li li li li li li li li li li li li:hover ul ,
#cm-nav li li li li li li li li li li li li li li li li li li li:hover ul ,
#cm-nav li li li li li li li li li li li li li li li li li li li li:hover ul ,
#cm-nav li li li li li li li li li li li li li li li li li li li li li:hover ul {
display: block;
margin-left: 100%;

}

#cm-nav ul ul {margin-left: 0px}

#cm-nav ul {
top: 0px;
left: 0px;

}

 

[bookouri]

I took another look at that css. It was something i inherited anyway and I decided to start over from scratch rather than dig through all that. I'd still be interested in knowing what elements are causing the IE problems if anybody can comment on it though..

thanks

 

[darryncooke]

If I inherited a menu that looked like that CSS wise I'm pretty sure I'd start over.

Darryn Cooke

http://www.darryncooke.com

| Marketing and Creative Services

 

[bookouri]

Yeah, i was trying to be a slacker and get away without doing more than touching up and moving on. Then i got a good look at the whole thing..

 

[Vragabond]

The most common culprit for IE's misbehaving is the lack of Doctype, which is something that is part of your HTML, rather than CSS. Without seeing your HTML, it's hard to say what could be throwing IE off. Also, you did not say, which IE we're talking about. IE7 will have problems with child (>) selector, newer versions should be OK with it.

[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]

 

[FrankknarF]

Judging from your CSS, you want to make a nested (multi-level) menu. Here's a tutorial on how to do that: Create a Drop-down/Fly-out Menu with CSS.

How to: Position in, Center in, Create a Fixed ('Sticky') Footer with, and Create a Drop-Down/Fly-Out Menu with CSS: Website Laten Maken Amsterdam.

 

[bookouri]

thanks, ill take a look at that one. I found another one that was above average from most I have seen at

http://www.devinrolsen.com/pure-css-vertical-menu/