0

这是使用的 CSS。我正在做的是将鼠标悬停在主 UL 上，然后隐藏 Li，并为美化目的进行一些着色

     .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>
4

0 回答 0