CSS HOVER-IE

[candlese]

Hello I am tryig to get a menu done using css. Below is the code. I can see it on Firefox- but not IE. Seems weird to me. Could someone check and see what I have in the code that should not be there or what I am missing.

<script type="text/javascript"><![CDATA[//><!--
startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("nav");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
}
node.onmouseout=function() {
this.className=this.className.replace&raquo;
(" over", "");
}
}
}
}
}
window.onload=startList;
//--><!]]></script>

<STYLE TYPE="text/css">
<!--
body {
font-family:arial,verdana,tahoma,helvetica;
font-size:12px;
}

#nav, #nav ul { /* all lists */
padding: 0;
margin: 0;
list-style: none;
float : left;
width : 11em;

}

#nav li { /* all list items */
position : relative;
float : left;
line-height : 1.50em;
margin-bottom : -1px;
width: 11em;
}

#nav li ul { /* second-level lists */
position : absolute;
float : left;
left:-111em;
margin-left : 11.05em;
margin-top : -1.35em;
display:none
}


#nav li a {
width: 11em;
w\idth : 10em;
display : block;
color : #FFFFCC;
font-weight : bold;
text-decoration : none;
background-color : #7799CC;
border : 1px solid maroon;
padding : 0 0.5em;
}

#nav li:hover ul, li.over ul {
display: block; }


#nav li a:hover {
color : #FFFFCC;
background-color : maroon;
}



#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul { /* lists nested under hovered list items */ left: auto;
}

#content {
margin-left : 12em;
}
# nav ul, li, li a {box-sizing:content-box; vertical-align:bottom;}


H1 { text-align: center; text-decoration: none;}

H2 { text-align: left; color:#4682B4; font-size:large; text-decoration: none;}
H3 { text-align: justified; color:#maroon; font-size:large; text-decoration: none;}
H6 { text-align: center; color:#FFFFCC; font-size:small; text-decoration: none;}

CDATA {font-family: sans-serif, verdana ; font-size:large;}
CDATA {font: 110% sans-serif;}
--></STYLE>

<!--[if IE]>
<style type="text/css" media="screen">
body {
behavior: url(csshover.htc);
font-size: 90%;
}
#menu ul li {float: left; width: 100%;}
#menu ul li a {height: 1%;}

#menu a, #menu h2 {
font: bold 0.2em/0.4em arial, verdana, sans-serif;
}
</style>
<![endif]-->
</HEAD>

I would very much appreciate any help. Thank you

[candlese]

OK I have changed it a bit and taken out some code that should not have been there but I am still having trouble with IE. I can see everything with others just not with ie.

<STYLE TYPE="text/css">
<!--

body {
font-family:arial,verdana,tahoma,helvetica;
font-size:14px;
}

#nav, #nav ul { /* all lists */
padding: 0;
margin: 0;
list-style: none;
float : left;
width : 11em;
display:block;
}

#nav li { /* all list items */
position : relative;
float : left;
line-height : 1.25em;
margin-bottom : -1px;
width: 11em;
}

#nav li ul { /* second-level lists */
position : absolute;
float : left;
left:-111em;
margin-left : 11.05em;
margin-top : -1.35em;
display:block;
}
nav li:hover ul ul,nav li.over ul ul { display:none; } nav li:hover ul, nav li li:hover ul, nav li.over ul,nav li li.over ul { display: block; }

#nav li a {
width: 11em;
w\idth : 10em;
display : block;
color : #FFFFCC;
font-weight : bold;
text-decoration : none;
background-color : #7799CC;
border : 1px solid maroon;
padding : 0 0.5em;
}
#nav li a name{
width: 11em;
w\idth : 10em;
display : block;
color : #FFFFCC;
font-weight : bold;
text-decoration : none;
background-color : #7799CC;
border : 1px solid maroon;
padding : 0 0.5em;
}



#nav li a:hover {
color : #FFFFCC;
background-color : maroon;
}

#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul { /* lists nested under hovered list items */
left: auto;
}
#content {
margin-left : 12em;
}

<!--[if gte IE 5]><![if lt IE 7]>
<style type="text/css">
/* that IE 5+ conditional comment makes this only visible in IE 5+ */
ul.makeMenu li { /* the behaviour to mimic the li:hover rules in IE 5+ */
behavior: url( IEmen.htc );
}
* Fix IE. Hide from IE Mac \*/
* html ul li { float: left; }
* html ul li a { height: 1%; }
/* End */



H1 { text-align: center; text-decoration: none;}

H2 { text-align: left; color:#4682B4; font-size:x-large; text-decoration: none;}
H3 { text-align: left; color:#660000; text-decoration: none;}
H6 { text-align: center; color:#FFFFCC; font-size:small; text-decoration: none;}

CDATA {font-family: sans-serif, verdana ; font-size:large;}
CDATA {font: 110% sans-serif;}
--></STYLE>



<script type="text/javascript"><![CDATA[//><!--
startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("nav");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName=="li") {
node.onmouseover=function() {
this.className+=" over";
}
node.onmouseout=function() {
this.className=this.className.replace(" over", "");
}
}
}
}
}
window.onload=startList;

//--><!]]></script>


</HEAD>
In bold I know I have several submenu hovers but which one do I use - and if I use more than one which one takes precedence ??
If someone out there who has used css can help me- I would be ever so grateful!
I am also trying to figure out the IEmen file. I have my script there but what else ? The fix above comes from the web- sure some of you will recognize it.

thank you for any help

[dharrison]

nav li:hover ul ul,nav li.over ul ul { display:none; } nav li:hover ul, nav li li:hover ul, nav li.over ul,nav li li.over ul { display: block; }

#?

Altho looking at original, you already have that.

Shooting fish but it probably doesn't like

#nav li a name{

These should be separated with a comma. I have had trouble with making[*] into hyperlinks before. I just found another way around it.

HTH

[candlese]

Just wanted to say thank you for trying to help. I did figure it out using (li) as submenu and it works great, but I thought I was going to loose my mind. I guess its so new-using css for menu's with a sub menu that no one else could offer any help. Shame as I thought more people were up on these things. Just goes to show you. Thank you again for taking the time to help.