這是一個教程就如何創建純 CSS下拉菜單沒有使用JavaScript。 不過我注意到，人們經常使用JavaScript來達到這種效果。 其實，有一個簡單的方法只使用CSS。

下面是例子

第一步驟：我們創建一個基本的HTML結構。

 > <h1> Developer's Paradise demos </h1> <ul id = "menu" > <li> <span> Home </span> <ul> <li> <a href = "#" > Menu item 1 </a> </li> <li> <a href = "#" > Menu item 2 </a> </li> <li> <a href = "#" > Menu item 3 </a> </li> </ul> </li> <li> <span> About Us </span> <ul> <li> <a href = "#" > Menu item 1 </a> </li> <li> <a href = "#" > Menu item 2 </a> </li> <li> <a href = "#" > Menu item 3 </a> </li> </ul> </li> <li> <span> Products </span> <ul> <li> <a href = "#" > Menu item 1 </a> </li> <li> <a href = "#" > Menu item 2 </a> </li> <li> <a href = "#" > Menu item 3 </a> </li> </ul> </li> </ul> </div> <分區 編號 =“頭”> <h1>開發者的樂園演示</ H1的> <UL認證 的ID =“菜單”> <li> 的<span>首頁</跨度> <ul> <li> <一 的HREF =“＃” >“功能表項目1 </一> </李> <li> <一 的HREF =“＃”>“功能表項目2 </一> </李> <li> <一 的HREF =“＃”>“功能表項目3 </一> </李> </ UL認證> </李> <li> 的<span>公司簡介</跨度> <ul> <li> <一 的HREF =“＃”>“功能表項目1 </一> </李> <li> <一 的HREF =“＃”>“功能表項目2 </一> </李> <li> <一 的HREF =“＃”>“功能表項目3 </一> </李> </ UL認證> < /李> <li> 的<span>產品</跨度> <ul> <li> <一 的HREF =“＃”>“功能表項目1 </一> </李> <li> <一 的HREF =“＃”>菜單項目2 </一> </李> <li> <一 的HREF =“＃”>“功能表項目3 </一> </李> </ UL認證> </李> </ UL認證> </格> 

第二步：現在我們創建的CSS代碼魔

  ; padding : 0 ; } * {保證金：0;填充：0;}

身體{
 ; 背景 ：＃222;
 Arial, Helvetica, sans-serif ;字體：100％的正常宋體，黑體， 無襯線 ;
 }

 : #fff ; } H1的{ 顏色 ：＃呋 ;}

 ＃頭 {
 ;身高：120px;位置：親屬 ;
 ; 背景 ：＃333;
 }

 {＃菜單
保證金：0px;
填充：0px;
位置：絕對的 ;
 ; 頂部 ：70px;
顯示：塊 ;
 }

 ＃“菜單>李{
列表樣式類型：無 ;
浮動：左 ;
顯示：塊 ;
 ;保證金：0px 10px;
位置：親屬 ;
填充：10px;
寬度：100像素 ;
 }

 ul { ＃“菜單>李：懸停 UL認證{
顯示：塊 ;
 }

 { ＃“菜單>李：懸停 {
 ; 背景顏色 ：＃808080;
萬盎司邊界半徑：10px;
 - WebKit的邊界半徑：10px;
 }

李UL認證{＃菜單
保證金：0px;
填充：0px;
顯示：無 ;
 }
 ＃菜單李李{UL認證
列表樣式類型：無 ;
 ;保證金：10px 0 0 0;
字體大小：11px;
 }

 ＃菜單李李一{UL認證
顯示：塊 ;
 ;填充：5px 10px;
 ; 顏色 ：＃呋 ;
文字裝飾：無 ;
字體重量：大膽 ;
 }

 a { ＃菜單 UL認證李李：懸停一{
 ; 背景顏色 ：＃ 六十〇萬六千〇六十 ;
萬盎司邊界半徑：5px;
 - WebKit的邊界半徑：5px;
 }

李跨度{＃菜單
光標：指針 ;
 ;保證金：0px 10px;
字體重量：大膽 ;
 ; font-size : 11px ; 顏色 ：＃呋 ;字體大小：11px;
 } 

請注意，此代碼不工作在IE6（這個可憐的瀏覽器只是不知道什麼是UL認證>裡的意思）。

我將不勝感激，如果你能花一秒鐘，以幫助促進和分享我的博客此鏈接​​的任何你喜歡的網絡站點使用下面的鏈接。 這裡是一個鏈接到我們的首選網站，如果你想註冊域名 。

提起下： 的CSS ， 教程由admin