关于网站二级联动菜单前台不能正常显示的问题

在作网站的时候遇到一个二级联动菜单不显示的问题，我是想用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的话，前台能够显示二级菜单，可是不能自动收缩。

请各位大侠帮忙分析一下应该怎么解决，若有好的解决办法请及时回复，小弟感激涕零！