Html CSS菜单中的大量结果导致失真

这是使用的CSS。我所做的是把哈弗交给主要的UL然后把李藏起来， 还有一些用于美化的颜色

     .preload1 {background: url(/ncbeonline/image/dbintranet/untitled.gif);}
     .preload2 {background: url(/ncbeonline/image/dbintranet/images.gif);}
     .preload3 {background: url(/ncbeonline/image/dbintranet/gear_icon.gif);}

     #nav {padding: 0; margin:0; list-style:none; height:0px; width:31px; background:black; position:relative; z-index:500; font-family:arial, verdana, sans-serif;}
     #nav li.top {display:block;  }
     #nav li a.top_link {display:block;  height:14px; line-height:15px;
     width:11px;  color:black; text-decoration:none; font-size:9px; font-weight:bold; padding:0 0 0 0px; cursor:pointer;}
     #nav li a.top_link span {display:block; padding: 0; height:14px;width:31px; color:#CFDAEB;}
     #nav li a.top_link span.down { display:block; padding: 0; height:14px; width:31px;color:#CFDAEB;}
     #nav li a.top_link:hover {color:black; color: #CFDAEB;}
     #nav li a.top_link:hover span {color:#CFDAEB;}
     #nav li a.top_link:hover span.down {color:#CFDAEB;}

     #nav li:hover > a.top_link {color:black; color: #CFDAEB;}
     #nav li:hover > a.top_link span {color:#CFDAEB;}
     #nav li:hover > a.top_link span.down {color:#CFDAEB;}

     /* Default list styling */

     #nav li:hover {position:relative; z-index:200;}

     /* keep the 'next' level invisible by placing it off screen. */
     #nav ul,
     #nav li:hover ul ul,
     #nav li:hover ul li:hover ul ul,
     #nav li:hover ul li:hover ul li:hover ul ul,
     #nav li:hover ul li:hover ul li:hover ul li:hover ul ul
     {position:absolute;  top:-9999px; width:0; height:0; margin:0; padding:0; list-style:none;}

     #nav li:hover ul.sub
     {right:0; top:16px; background: yellow; padding:3px; border:1px solid #5a5aff; white-space:nowrap; width:200px; height:auto; z-index:300;}
     #nav li:hover ul.sub li
     /** big box*/
     {display:block; height:20px; position:relative; float:right; width:200px; font-weight:normal;}
     #nav li:hover ul.sub li a
     /* for bg color*/
     {display:block; font-size:14px; height:20px; width:200px; line-height:20px; text-indent:5px; color:#000; text-decoration:none;}
     #nav li ul.sub li a.fly
     {background:yellow;}
     #nav li:hover ul.sub li a:hover
     {background:#5a5aff; color:yellow;}
     #nav li:hover ul.sub li a.fly:hover
     {background:#5a5aff; color:yellow;}

     #nav li:hover ul li:hover > a.fly {background:#5a5aff; color:yellow;}

     #nav li:hover ul li:hover ul,
     #nav li:hover ul li:hover ul li:hover ul,
     #nav li:hover ul li:hover ul li:hover ul li:hover ul,
     #nav li:hover ul li:hover ul li:hover ul li:hover ul li:hover ul
     {right:90px; top:-4px; background: yellow; padding:3px; border:1px solid #5a5aff; white-space:nowrap; width:90px; z-index:400; height:auto;}

用于生成菜单的HTML部分。这是一个带有4个选项的简单菜单，带有一个onclick事件，用于导航

                                    <ul id="nav">
        <li class="top"><a href="#nogo53" id="shop" class="top_link"><span class="down">
        <img  src="/ncbeonline/image/dbintranet/gear_icon.gif"
                                                    width="20px" height="20px" align="right" /></span></a>
                                        <ul class="sub">
            <li><a onclick="pageSubmit(${referenceId});

              $('PRODUCT').action=
              $('PRODUCT').action.gsub('ProductList/list.xhtml','ProductListDetail
                /historyList.xhtml');
                                           document.getElementById('PRODUCT').submit();">-View Product 
     </a></li>
                                        <li><a onclick="pageSubmit(${referenceId});
                                        $('PRODUCT').action=$('PRODUCT').action.gsub('ProductList/list.xhtml','ProductListDetail  /edit.xhtml');
                                        document.getElementById('PRODUCT').submit();">-Edit Product   </a></li>
                                        <li><a onclick="pageSubmit(${referenceId});
                                        $('PRODUCT').action=$('PRODUCT').action.gsub('ProductList/list.xhtml','ProductListDetail/copy.xhtml');
                                        document.getElementById('PRODUCT').submit();">-Copy Product   </a></li>
                                        <li><a onclick="pageSubmit(${referenceId});
                                        $('PRODUCT').action=$('PRODUCT').action.gsub('ProductList/list.xhtml','ProductListDetail/addNewChildParent.xhtml');
                                        document.getElementById('PRODUCT').submit();">-Add Child Product   </a></li>
                                        <s:if test='%{approvalStatus neq "A"}'>
                                        <li><a onclick="pageSubmit(${referenceId});
                                        $('PRODUCT').action=$('PRODUCT').action.gsub('ProductList/list.xhtml','ProductListDetail/deleteView.xhtml');
                                        document.getElementById('PRODUCT').submit();">-Delete Draft   </a></li>
                                        </s:if>
                                        <s:elseif test='%{approvalStatus eq "A"}'>
                                        <li><a onclick="pageSubmit(${referenceId});
                                        $('PRODUCT').action=$('PRODUCT').action.gsub('ProductList/list.xhtml','ProductListDetail/deleteView.xhtml');
                                        document.getElementById('PRODUCT').submit();">-Delete Product   </a></li>
                                        </s:elseif>
                                        </ul>
                                        </li>
                                    </ul>

-查看产品

-编辑产品
-复制品
-添加子产品
-删除草稿
-删除产品

这里的图像链接无意冒犯，但您似乎有这么多的代码用于如此简单的菜单，如果可以简化，我们将非常感激……css对于颜色和背景来说太多了