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

來源:互聯網
上載者:User

簡介:這是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

相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.