请教一个关于ie浏览器兼容问题！急！！

我在MasterPage中做了一个竖向的可收缩的导航栏，在IE6下可以正常的收缩，但是在IE7下则无法实现收缩，子菜单虽然显示了，但是却隐藏在主菜单后面了（由于主菜单无论怎么点击都不向下移动）！不知道原因何在，急求解决办法！！

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>无标题文档 </title>
    <style type="text/css">
    body {

        background-color: White;
        margin:0;
        /*background-image: url(pics/beijing.png);*/
    }
    .frame {
        width : 99.9% ;
        border : 0px 0px;
    }

    #left{
        background:#eeeeee;
    }

    #left ul{
        margin:0;
        padding:0;

    }

    #nav {
      margin:0;
      margin-left:3px;
      margin-top:10px;
      padding;0;

    }

    #nav li{

        margin:0;
        padding:0;
        list-style-type:none;
        text-align:center;
        height :30px;
        width:150px;
        background-image:url(pics/navi.gif);
        border-bottom:#FFFFFF 5px solid;
    }
    #nav ul{
        margin:0;
        padding:0;
        display:none;
    }
    li a
    {
        font-weight:bold;
        font-size:10pt;
        width:150px;
        color:#000000;
        line-height:20pt;
        text-decoration:none;
    }
    #nav li a:hover{
        color:#cc9933;
        font-weight:bold;
    }

  #nav li ul{
        margin-top:0px;
        margin:0;
        padding:0;
        list-style-type:none;
        background-color:#f0ffff;
    }


    #nav li ul li{

        width:150px;
        margin:0;
        margin-top:3px;
        padding:0;
        font-weight:normal;
        background-image:none;
        background-color:#f0ffff;
        border-bottom:#E2EDF8 3px solid;
    }

    #nav li ul li a{
        font-weight:normal;
        color:#000000;
    }

    #header {
        height : 120px;
        width:1024px;
        background-image : url(pics/Logo.gif) ;
        <%--border:#333333 1px solid;--%>
    }

    .link{
        margin:0;
        padding:0;
    }

    #content {
        position: relaitive;
        margin:0 auto;
        text-align:left;
        border-bottom-style:double;
        height:570px;
        <%--border:#333333 1px solid;--%>

    }
    #footer {
        font-size:14px;
        text-align: center;
        height:15px;

        display:block;

        <%--border:#333333 1px solid;--%>
    }

    #state a{
    text-decoration:none;
    color:#000000;
        }

    #state  a:hover{
        color:#cc9933;
        font-weight:bold;
        text-decoration:underline;
    }

.STYLE1 {color: #FF0000}
    </style>

</head>

<body>
  <ul id="nav">
    <li> <a href="Welcome.aspx">返回首页 </a> </li>
    <li> <a href="#" onmousedown="showSubMenu('SubMenu1');">单位管理 </a>
        <ul id="SubMenu1">
            <li> <a href="Main.aspx" >本单位信息 </a> </li>
            <li> <a href="SubOrganInfo.aspx" >下级单位信息 </a> </li>
            <li> <a href="CreateOrgan.aspx" >创建单位 </a> </li>
        </ul>
    </li>
    <li> <a href="#" onmousedown="showSubMenu('SubMenu2');">人员管理 </a>
        <ul id="SubMenu2">
            <li> <a href="AdminInfo.aspx" >本人信息 </a> </li>
            <li> <a href="PersonInfo.aspx" >人员信息管理 </a> </li>
            <li> <a href="CreatePerson.aspx" >添加人员 </a> </li>
        </ul>
    </li>

  </ul>

<script type="text/javascript">
var lastSubMenuID;
//记录最后点击的子菜单
function doRecord(subMenuID)
{
  document.getElementById(subMenuID).style.display = "block";
  lastSubMenuID = subMenuID;
  return lastSubMenuID;
}
//隐藏子菜单
function hideLastSubMenu()
{
  if(lastSubMenuID == undefined || lastSubMenuID == "")
    {
        return;
    }
  else
    {
        var lastSubMenu = document.getElementById(lastSubMenuID);
        lastSubMenu.style.display = "none";
    }
}
//显示子菜单
function showSubMenu(subMenuID)
{
    if(lastSubMenuID == subMenuID)
      {
          if(document.getElementById(lastSubMenuID).style.display == "block")
              {
                    document.getElementById(lastSubMenuID).style.display = "none";
                    return;
              }
      }
    if(lastSubMenuID == undefined)
      {
          doRecord(subMenuID);
      }
    else
      {
          hideLastSubMenu();
          doRecord(subMenuID);
        }
    changeMenuState(subMenuID);
}
//改变子菜单的样式
function changeMenuState(subMenuID)
{
    var subMenu = document.getElementById(subMenuID);
    subMenu.style.display = "block";
}
</script>

</body>
   #nav li{

        margin:0;
        padding:0;
        list-style-type:none;
        text-align:center;
        height :30px;     <--------- error
        width:150px;
        background-image:url(pics/navi.gif);
        border-bottom:#FFFFFF 5px solid;
    } 你的li设置了高度 height:30px
所以当设ul的display为block时它不会自动调整高度，
把这句删去了就好