TShopping

 找回密碼
 註冊
搜索
查看: 3442|回復: 1

[教學] CSS製作下拉式說明

[複製鏈接]
發表於 2008-8-28 01:51:49 | 顯示全部樓層 |閱讀模式
 
Push to Facebook Push to Plurk Push to Twitter 
pulldown.css檔案內容
  1. /* CSS Document */


  2. /* 對IE進行修正behavior:url(csshover.htc) */
  3. body {
  4. background:url(BG.jpg) no-repeat;
  5. font-family:Courier,新細明體;
  6. behavior:url(csshover.htc);
  7. }

  8. a:link,a:visited {
  9. text-decoration:none;
  10. }

  11. ol {

  12. padding:0px;
  13. margin-left:15%;
  14. background:#FFF;
  15. width:85%;
  16. border-top:#AAA 1px solid;
  17. border-bottom:#AAA 1px solid;

  18. }
  19. /* 設定為浮動 四周留白 功能表文字4字元寬*/
  20. li.mainmenu {
  21. float:left;
  22. list-style:none;
  23. margin:0px;
  24. padding:0.5em 1em;
  25. position:relative;
  26. width:4em;
  27. border:0;
  28. }
  29. /* 當滑鼠游標停在主功能文字上時,使用ul.level1 才生效,換一行才顯示 */
  30. li.mainmenu:hover ul.level1 {
  31. display:block;
  32. }
  33. li.submenu {
  34. border-bottom:#aaa 1px solid;
  35. list-style:none;
  36. width:8em;
  37. margin:0px;
  38. padding:0.5em 1em;
  39. position: relative;
  40. background:url(d.gif) center right no-repeat;
  41. }

  42. /* 當滑鼠游標停在清單項目上時,才生效 */
  43. li:hover {
  44. background-color:#ecebeb;
  45. }



  46. ul {
  47. padding:0px;
  48. margin:0px;
  49. width:10em;
  50. background:#fff;
  51. border:#000 1px solid;
  52. }
  53. /* 含有連結去除清單項目前置字元,連結文字的底線移除 */
  54. li, li a {
  55. border-bottom:#AAA 1px solid;
  56. list-style:none;
  57. margin:0px;
  58. padding:0.5em 1em;
  59. text-decoration:none;
  60. }

  61. /* 第一層功能表 */
  62. ul.level1 {
  63. display:none;
  64. position:absolute;
  65. left:0em;
  66. top:2em;
  67. }

  68. /* 第二、三層功能表 */
  69. ul.level2,
  70. ul.level3 {
  71. display:none;
  72. position:absolute;
  73. left:10em;
  74. top:0em;
  75. }

  76. li.mainmenu:hover ul.level1,
  77. ul.level1 li.submenu:hover ul.level2,
  78. ul.level2 li.submenu:hover ul.level3,
  79. ul.level3 li.submenu:hover ul.level4 {
  80. display:block;
  81. }
複製代碼


index.html檔案內容

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>pulldown</title>
  6. <!-- 連結CSS檔案-->
  7. <link href="../pulldown.css" rel="stylesheet" type="text/css">
  8. </head>
  9. <body>
  10. <h1>CSS製作下拉式說明</h1>
  11. <ol>
  12. <!-- 多層次表單語法開始 主功能表 -->
  13.   
  14. <li class="mainmenu">檔案

  15. <!-- 功能表第一層-->
  16.   <ul class="level1">
  17.   <!-- 副功能表-->
  18.    <li class="submenu">新增
  19.    
  20.    <!-- 功能表第二層-->
  21.     <ul class="level2">
  22.      <li>視窗</li>
  23.              <li>郵件</li>
  24.              <li>公佈</li>
  25.              <li>連結人</li>
  26.     </ul>
  27.    </li>
  28.    <li>開啟舊檔</li>
  29.    <li>儲存檔案</li>
  30.    <li>另存新檔</li>
  31.    <li class="submenu">傳送
  32.          <ul class="level2">
  33.              <li>以電子郵件傳送連結</li>
  34.              <li>以電子郵件傳送畫面</li>
  35.           </ul>
  36.        </li>
  37.   </ul>
  38. </li>
  39. <li class="mainmenu">檢視
  40.   <ul class="level1">
  41.    <li>工具列</li>
  42.    <li>狀態列</li>
  43.    <li>瀏覽器列</li>
  44.    <li>字型</li>
  45.    <li class="submenu">編碼
  46.     <ul class="level2">
  47.      <li>自動選取</li>
  48.              <li>繁體中文</li>
  49.              <li>簡體中文</li>
  50.      <li class="submenu">其他
  51.      
  52.      <!-- 功能表第三層-->
  53.       <ul class="level3">
  54.        <li>日文</li>
  55.        <li>韓文</li>
  56.       </ul>
  57.      </li>
  58.     </ul>
  59.    </li>
  60.   </ul>
  61. </li>
  62. <li class="mainmenu">工具
  63.     <ul class="level1">
  64.       <li>郵件和新聞</li>
  65.       <li>封鎖快顯程式</li>
  66.       <li>管理附加元件</li>
  67.       <li>同步處理</li>
  68.       <li>Windows Update </li>
  69.       <li>網際網路選項</li>
  70.     </ul>
  71.   </li>
  72.   <li class="mainmenu">說明
  73.     <ul class="level1">
  74.       <li>內容與索引</li>
  75.       <li>每日小秘訣</li>
  76.       <li>線上支援</li>
  77.     </ul>
  78.   </li>

  79. </ol>
  80. </body>
  81. </html>
複製代碼

 

臉書網友討論
您需要登錄後才可以回帖 登錄 | 註冊 |

本版積分規則



Archiver|手機版|小黑屋|免責聲明|TShopping

GMT+8, 2016-12-10 23:02 , Processed in 0.052093 second(s), 18 queries .

本論壇言論純屬發表者個人意見,與 TShopping綜合論壇 立場無關 如有意見侵犯了您的權益 請寫信聯絡我們。

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回復 返回頂部 返回列表