仅用css编写无限分级弹出菜单

发布时间：2006-03-31 22:11:16　来源：bbs.51js.com 网友评论 0 条

　　一直以来，我们大多使用js来实现弹出菜单，可是根据 w3c 的css标准，根本就没有这个必要。只需要简单得使用css+html就可以做出一个无限分级的弹出菜单。没错，就是利用 Element:hover 这个伪类。注意，浏览这个例子，你必须使用标准浏览器，例如 Mozilla Firefox/ Opera 7.5

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head>     <title>css menu</title>     <style type="text/css">     /*<![CDATA[*/       ul.menu       {         width:180px;         cursor:hand;         list-style-type:none;         border:1px solid #cccccc;  padding:0px;  margin:0px;       }       ul.menu li       {         width:100%;  display:block; position:relative;         }       ul.menu li   a       {         background-color:#06829C;         color:#ffffff;         width:100%;         display:block;         font-size:9pt;         padding:2px;  padding-left:10px;       }       ul.menu li ul.menu       {          display:none;          width:190px;          position:absolute;          z-index:1000;          left:80%;          top:-10px;       }       ul.menu li:hover > a       {         width:100%;         background-color:#64ACF8;         color:#ffffff;       }       ul.menu li:hover > ul.menu       {          display:block;       }     /*]]>*/     </style></head><body>     <ul class="menu">          <li><a href="#">Item 1</a></li>          <li>               <a href="#">Menu Item &gt;</a>               <ul class="menu">                    <li><a href="#">item</a></li>                    <li>                         <a href="#">item &gt;</a>                         <ul class="menu">                              <li><a href="#">menu item</a></li>                              <li><a href="#">menu item</a></li>                         </ul>                    </li>                    <li>                         <a href="#">item &gt;</a>                         <ul class="menu">                              <li><a href="#">menu item</a></li>                              <li><a href="#">menu item</a></li>                                                            <li><a href="#">menu item</a></li>                         </ul>                    </li>                    <li>                         <a href="#">item &gt;</a>                         <ul class="menu">                              <li><a href="#">menu item</a></li>                              <li><a href="#">menu item</a></li>                              <li><a href="#">menu item</a></li>                              <li><a href="#">menu item</a></li>                              <li><a href="#">menu item</a></li>                              <li><a href="#">menu item</a></li>                              <li><a href="#">menu item</a></li>                              <li><a href="#">menu item</a></li>                              <li><a href="#">menu item</a></li>                              <li><a href="#">menu item</a></li>                              <li><a href="#">menu item</a></li>                              <li><a href="#">menu item</a></li>                         </ul>                    </li>               </ul>          </li>     </ul></body></html>