安眠药的作用与功效:div+css定义下拉菜单的问题

基本代码如下:

<div id="nav">
<div>
<ul>
<li id="n-main1"><a href="#">main1</a>
<ul>
<li><a href="#">one</a></li>
<li><a href="#">two</a></li>
<li><a href="#">three</a></li>
<li><a href="#">four</a></li>
</ul>
</li>
<li id="n-main2"><a href="#">main2</a>
<ul>
<li><a href="#">five</a></li>
<li><a href="#">six</a></li>
<li><a href="#">seven</a></li>
</ul>
</li>
</div>
</div><!-- /nav -->

有两个<li>组成的菜单，id分别是id="n-main1"，id="n-main2"，在<li>菜单里面还包含有一组列表，要在鼠标移动在<li>菜单上面时显示<li>里面的列表菜单，在默认状态下我将被嵌套的<ul>用css定义:
#nav ul li ul{
display:none;
}
当鼠标移动到第一级的<li>菜单时我要让嵌套在<li>里面的<ul>显示，于是这样定义:
#nav ul li:hover ul{
display:block;
}
但是 ul li:hover ul 这样定义只有在firefox上才有效果，在IE中完全无效，是不是IE不承认
li:hover这种写法？有没有什么办法补救？