CSS級聯下拉式功能表的製作

簡介：這是CSS級聯下拉式功能表的製作的詳細頁面，介紹了和php,有關的知識、技巧、經驗，和一些php源碼等。

class='pingjiaF' frameborder='0' src='http://biancheng.dnbcw.info/pingjia.php?id=362690' scrolling='no'>

---------------------------------
CSS級聯下拉式功能表的製作
---------------------------------
相關下載：
源碼 —— http://www.kuaipan.cn/file/id_22624530505662765.html
準備工作：無。
---------------------------------
個人部落格：www.jett23.com
交流郵箱：webmaster[at]jett23.com
---------------------------------

1.  下拉式功能表原型代碼：（ 實際開發中，我們更多的是採用 #navigation li a 這樣的形式來定義CSS配置樣式，而不是 ul li a ，所以需要在黃色標記處設定ul標籤的id值！ ）
<ul>
   <li><a href="#">菜單一</a></li>
   <li><a href="#">菜單二</a>
       <ul>
       <li><a href="#">子功能表一</a></li>
       <li><a href="#">子功能表二</a></li>
       <li><a href="#">子功能表三</a></li>
       </ul>
   </li>
   <li><a href="#">菜單三</a></li>
   <li><a href="#">菜單四</a>
       <ul>
       <li><a href="#">子功能表一</a></li>
       <li><a href="#">子功能表二</a></li>
       <li><a href="#">子功能表三</a></li>
       </ul>
   </li>
   <li><a href="#">菜單五</a></li>
</ul>

2.  下拉式功能表雛形：ul邊框填儲值均設為0（相容性！）；一級菜單清單項目（列表符號none、長100寬30px、左浮動、顯示inline、字型14px）
ul {
    margin:0px;
    padding:0px;
}
ul li {
    list-style-type:none;
    height:30px;
    width:100px;
    float:left;
    font-size:14px;
    display:inline;
}

3.  下拉式功能表連結樣式（關鍵代碼）：（修飾底線無、顏色白色、行高29px、背景色藍色、顯示block、左填充10px、右下邊框1px solid #ccc）
ul li a {
    text-decoration:none;
    color:#FFFFFF;
    background-color:#006699;
    display:block;
    line-height:29px;
    padding-left:10px;
    border-bottom:1px solid #ccc;
    border-right:1px solid #ccc;
}

4.  下拉式功能表hover連結樣式（改變背景色：一級菜單灰色、子功能表深藍色）。
ul li a:hover {
    background-color:#333333;
}
ul li ul li a:hover {
    background-color:#00527D;
}

5.  至此，我們還需要最後一步。
當滑鼠移到一級菜單上時才顯示子功能表（關鍵代碼：黃色標識處）。
ul li ul {
    visibility:hidden;
}
ul li:hover ul {
    visibility:visible;
}

愛J2EE關注Java邁克爾傑克遜視頻站JSON線上工具

http://biancheng.dnbcw.info/php/362690.html pageNo:1