僅用css編寫無限分級彈出菜單

DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> CSS進階教程 >> 僅用css編寫無限分級彈出菜單

僅用css編寫無限分級彈出菜單

編輯：CSS進階教程

　　一直以來，我們大多使用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>

上一頁:引入css樣式表的四種方式介紹
下一頁:超強，用CSS構建iframe效果

CSS進階教程

webkit下text-indent首行縮進文字問題: 昨天在項目中遇到要在一個輸入框中使用縮進的情況，要用text-indent首行縮進2個文字。然後發現
網頁制作基礎：如何去掉超鏈接的下劃線: 　　我們可以用CSS語法來控制超鏈接的形式、顏色變化。　　下面我們做一個這樣的鏈接:未被點擊時超鏈
網頁制作：使用css設置iframe樣式: iframe應用很普遍，通常的需求有兩種：　　1. 獲取iframe效果，就是帶一個滾動條，可以省不

CSS基礎知識 Sass教程 CSS3基礎關於CSS CSS進階教程 DIV十CSS布局 CSS特效代碼 CSS詳解

DIV CSS 佈局教程網

相關文章