css 菜单问题，

为什么主菜单要设置成弹出子菜单的高度，子菜单才能显示出来？
这样会影响页面布局效果，如何修改？谢谢！<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>无标题页</title>
    
<style type="text/css">* { margin:0; padding:0; font-size:12px; color:#000; text-decoration:none; }
body { margin:0; padding:0; background:#fff; }/*主菜单*/
#nav { width:640px; height:500px; overflow:hidden; margin:0px auto 0 auto; position:relative;z-index:100;}
/*end */#nav li { float:left;}#nav_a,#nav_a a,#nav_b,#nav_b a,#nav_c,#nav_c a,#nav_d,#nav_d a,#nav_e,#nav_e a ,#nav_f,#nav_f a ,#nav_g,#nav_g a {
display:block; width:90px; height:30px; overflow:hidden; }

#nav_a a,#nav_b a,#nav_c a,#nav_d a,#nav_e a,#nav_f a,#nav_g a { padding-top:60px; overflow:hidden; }
#nav_a a {background:url(Images/Menu/Menu_ENG.png) 0 0 }
#nav_a a:hover { background:url(Images/Menu/Menu_ENG.png) 0 -33px }#nav_b a {background:url(Images/Menu/Menu_ENG.png) -90px 0 }
#nav_b a:hover {background:url(Images/Menu/Menu_ENG.png) -90px -33px }#nav_c a {background:url(Images/Menu/Menu_ENG.png) -181px 0 }
#nav_c a:hover {background:url(Images/Menu/Menu_ENG.png) -181px -33px }#nav_d a {background:url(Images/Menu/Menu_ENG.png) -273px 0 }
#nav_d a:hover {background:url(Images/Menu/Menu_ENG.png) -273px -33px }#nav_e a {background:url(Images/Menu/Menu_ENG.png) -365px 0 }
#nav_e a:hover {background:url(Images/Menu/Menu_ENG.png) -365px -33px }#nav_f a {background:url(Images/Menu/Menu_ENG.png) -456px 0 }
#nav_f a:hover {background:url(Images/Menu/Menu_ENG.png) -456px -33px }#nav_g a {background:url(Images/Menu/Menu_ENG.png) -548px 0 }
#nav_g a:hover {background:url(Images/Menu/Menu_ENG.png) -548px -33px }
#page_a #nav #nav_a a#cur1 {background:url(Images/Menu/Menu_ENG.png) 0 -68px }
#page_b #nav #nav_b a#cur2 {background:url(Images/Menu/Menu_ENG.png) -90px -68px }
#page_c #nav #nav_c a#cur3 {background:url(Images/Menu/Menu_ENG.png) -181px -68px }
#page_d #nav #nav_d a#cur4 {background:url(Images/Menu/Menu_ENG.png) -273px -68px }
#page_e #nav #nav_e a#cur5 {background:url(Images/Menu/Menu_ENG.png) -365px -68px }
#page_f #nav #nav_f a#cur6 {background:url(Images/Menu/Menu_ENG.png) -456px -68px }
#page_g #nav #nav_g a#cur7 {background:url(Images/Menu/Menu_ENG.png) -548px -68px }
#nav_a ul,#nav_b ul,#nav_c ul,#nav_d ul,#nav_e ul,#nav_f ul,#nav_g ul 
{visibility:hidden;position:absolute;left:0px;top:30px; width: 100%;}   
 
#nav_a a:hover ul,#nav_b a:hover ul,#nav_c a:hover ul,#nav_d a:hover ul,#nav_e a:hover ul,#nav_f a:hover ul,#nav_g a:hover ul
{visibility:visible;}   #nav_a ul a,#nav_b ul a,#nav_c ul a,#nav_d ul a,#nav_e ul a,#nav_f ul a,#nav_g ul a 
{display:block;border:1px solid #F2FFE6;background:#ffffff;padding:2px 10px;margin:3px;color:#000000;text-decoration:none;}   #nav_a ul a:hover,#nav_b ul a:hover,#nav_c ul a:hover,#nav_d ul a:hover,#nav_e ul a:hover,#nav_f ul a:hover,#nav_g ul a:hover
{background:#fafafa;color:#000000;border:1px solid #000000;}   #nav_a ul li,#nav_b ul li,#nav_c ul li,#nav_d ul li,#nav_e ul li,#nav_f ul li,#nav_g ul li
 {clear:both;text-align:left;font-size:12px;}   #nav_a ul li a,#nav_b ul li a,#nav_c ul li a,#nav_d ul li a,#nav_e ul li a,#nav_f ul li a,#nav_g ul li a
{display:block;width:160px;height:18px;margin:0;border:0;border-bottom:1px solid #A9FF53;background: #F2FFE6;}   #nav_a ul li a:hover,#nav_b ul li a:hover,#nav_c ul li a:hover,#nav_d ul li a:hover,#nav_e ul li a:hover,#nav_f ul li a:hover,#nav_g ul li a:hover 
{border:0;background:#DDFF95;border-bottom:1px solid #A9FF53;} 
</style> 
   
  
</head>
<body id="page_a">
    <form id="form1" runat="server">
<div>
<ul id="nav">
   <li id="nav_a"><a href="Menu1.aspx" id="cur1" title="HOME">HOME 
   <!--[if IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]-->          <ul> 
        <li><a href="" target="_self">aaa</a></li>
        <li><a href="" target="_self">bbbb</a></li>
        <li><a href="" target="_self">ccccc</a></li>
        <li><a href="" target="_self">ddddd</a></li>
        <li><a href="" target="_self">eee</a></li>
        <li><a href="" target="_self">ffffffff</a></li>
        <li><a href="" target="_self">ggggg</a></li>
        <li><a href="" target="_self">kkkkkkk</a></li>
        </ul>     <!--[if lte IE 6]></td></tr></table></a><![endif]-->   
    </li> <li id="nav_b"><a href="Menu1.aspx" id="cur2" title="SHIP">SHIP
<!--[if IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]-->  
        <ul> 
        <li><a href="" target="_self">aaSHIPa</a></li>
        <li><a href="" target="_self">bbSHIPbb</a></li>
        <li><a href="" target="_self">cccSHIPcc</a></li>
        <li><a href="" target="_self">dddSHIPdd</a></li>
        <li><a href="" target="_self">eeeSHIP</a></li>
        <li><a href="" target="_self">fffSHIPfffff</a></li>
        <li><a href="" target="_self">gggSHIPgg</a></li>
        <li><a href="" target="_self">kkkSHIPkkkk</a></li>
        </ul> 
 <!--[if lte IE 6]></td></tr></table></a><![endif]-->   
</li>
<li id="nav_c"><a href="Menu1.aspx" id="cur3" title="TRACK">TRACK</a></li>
<li id="nav_d"><a href="Menu1.aspx" id="cur4" title="PRODUCTS">PRODUCTS</a></li>
<li id="nav_e"><a href="Menu1.aspx" id="cur5" title="SERVICE">SERVICE</a></li>
<li id="nav_f"><a href="Menu1.aspx" id="cur6" title="TOOLS">TOOLS</a></li>
<li id="nav_g"><a href="Menu1.aspx" id="cur7" title="ABOUT US">ABOUT US</a></li></ul>
    </div>
    </form></body>
</html>