關於網站二級聯動菜單前臺不能正常顯示的問題

在作網站的時候遇到一個二級聯動菜單不顯示的問題，我是想用css直接控制二級導航菜單，可是二級菜單不能現實，下邊是二級聯動菜單的html部分：

<div class="menu">
  <ul class="wrapper">
    <li class="hover"><a href="http://www.urkeji.com">首頁</a></li>
            <li class="menu-item" id=menu-item-382><a href="http://www.urkeji.com/link" title="[navlist:name]">一級菜單</a>
<div class="mainlevel">
<UL class=sub-menu>
<LI class="menu-item " id=menu-item-376><A href="http://www.urkeji.com/link2">二級菜單]</A> </LI>
</UL>
</div>
            </li>
  </ul>
</div>

控制二級聯動菜單的CSS樣式表代碼以下：

.menu{ height:35px; background:url(../images/bg_menu.jpg) repeat-x; margin-bottom:5px;}
.menu li{ height:35px; line-height:35px; font-weight:bold; font-size:14px;float:left;background:url(../images/bg_menu_li.jpg) no-repeat}
.menu li a{ color:#FFFFFF; display:block; padding:0 20px; }
.menu li a:hover,.menu li.hover a{background:url(../images/bg_menu_hover.jpg) center center no-repeat; color:#002563; text-decoration:none}
.menu .mainlevel ul {display:none; position:absolute;}
.menu  ul li ul li {height:auto;line-height:20px;border-top:1px #FFFFFF solid; float:none; background:none}
.menu  ul li ul li a,.menu li.hover ul li a {color: #000000;display:block; width:90px; height:25px; line-height:25px;font-size:12px;font-weight:normal;text-align:center;background:url(../images/bg_sub.png) repeat-x; overflow:hidden; white-space:nowrap}
.menu  ul li ul li a:hover {color:#000000;background:#d5d3d4; background-image:none}

如今的問題就是若是按照這個CSS樣式表寫的話，前臺看不到二級菜單，可是從源碼中分析二級菜單的內容已經被加載。若是把CSS樣式表中控制二級菜單的第一個display屬性值改爲block的話，前臺能夠顯示二級菜單，可是不能自動收縮。

請各位大俠幫忙分析一下應該怎麼解決，若有好的解決辦法請及時回覆，小弟感激涕零！