Menu in IE and FX

[mithu_sree]

Here is what i have done.
It works well on Firrefox 1.5
but not on IE
Can anyone clarify why it is?



-------------PHP function---------------

[code]
<?php

function makeCssMenu() {
echo "<div id=\"nav\">
<ul>
<li><a href=\"./home.php\" >Home </a></li>
</ul>

<ul>
<li><a>Management1</a>
<ul>
<li><a href=\"screen1.php\" >Add </a></li>
<li><a href=\"screen2.php\" > Browse </a></li>
</ul>
</li>
</ul>

<ul>
<li><a>Management2</a>
<ul>
<li><a href=\".screen3.php\" >Add </a></li>
<li><a href=\"screen4.php\" > Browse</a></li>
</ul>
</li>
</ul>

<ul>
<li><a href=\"./theme.php\" >Themes </a></li>
</ul>

<ul>
<li><a href=\"./about.php\" >About </a></li>
</ul>

</div><br /><br />";
}
?>


[/code]


--------------------------------- CSS file _-------------------------

[code]
/**************** menu coding *****************/
#nav {
width: 100%;
float: left;
}

#nav ul {
list-style: none;
margin: 0;
padding: 0;
width: 20%;
float: left;
}

#nav ul>li>a{
font: bold 11px/16px arial, helvetica, sans-serif;
display: block;
margin: 0;
padding: 2px 3px;
width : 190px;
}

#nav ul>li>a {
text-decoration: none;
padding-left: 5px;
}

#nav ul>li>a:hover {
}

#nav li {
position: relative;
cursor: Default;
}

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

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

div#nav ul ul {
display: none;
}

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

div#nav ul li:hover ul,
div#nav ul ul li:hover ul,
div#nav ul ul ul li:hover ul{
display: block;
}
[/code]