TShopping

標題: CSS作出左側三層下拉式導覽列 [打印本頁]
作者: woff    時間: 2009-11-9 12:48
標題: CSS作出左側三層下拉式導覽列
CSS裡面寫入
  1. /* 設定選單寬度大小及背景顏色*/
  2. ol {
  3. padding:0px;
  4. margin-left:0%;
  5. background:#fff;
  6. width:160px;
  7. border-top:#aaa 1px solid;
  8. border-bottom:#aaa 1px solid;
  9. }
  10. li, li a {
  11. border:0px;
  12. list-style:none;
  13. margin:0px;
  14. text-decoration:none;
  15. }
  16. /* 設定主選單項目 */
  17. li.mainmenu {
  18. float:none;
  19. list-style:none;
  20. margin:0px;
  21. padding:0.3em 1em;
  22. position:relative;
  23. width:8em;
  24. border:#aaa 1px solid;
  25. }
  26. li.mainmenu:hover ul.level1{
  27. display:block;
  28. }
  29. li:hover {
  30. background-color:#ecebeb;
  31. }
  32. /* 設定副選單項目 */
  33. li.submenu {
  34. border:#aaa 1px solid;
  35. list-style:none;
  36. margin:0px;
  37. padding:0.3em 1em;
  38. position:relative;
  39. width:8em;
  40. background:url(d.gif) center right no-repeat;
  41. }
  42. ul {
  43. padding:0px;
  44. margin:0px;
  45. background:#fff;
  46. border:#000 0px solid;
  47. }
  48. ul.level1 {
  49. display:none;
  50. position:absolute;
  51. left:0em;
  52. top:0em;
  53. }
  54. ul.level2, ul.level3 {
  55. display:none;
  56. position:absolute;
  57. width:10em;
  58. left:10em;
  59. top:0em;
  60. }
  61. li.mainmenu:hover ul.level1, ul.level1 li.submenu:hover ul.level2, ul.level2 li.submenu:hover ul.level3, ul.level3 li.submenu:hover ul.level4 {
  62. display:block;
  63. left:10em;
  64. }
  65. ul.level1 li.submenu ul.level2 li.ssubmenu, ul.level1 li.submenu ul.level2 li.ssubmenu:hover {
  66. border:#aaa 1px solid;
  67. list-style:none;
  68. margin:0px;
  69. padding:0.3em 1em;
  70. position:relative;
  71. width:8em
  72. }
複製代碼
然後再INDEX.HTML裡面設定要出現的連結
  1. <ol>
  2. <!-- 設定主選單項目 -->
  3. <li class="mainmenu">檔案
  4.   <ul class="level1">
  5. <!-- 設定副選單項目 -->
  6.    <li class="submenu">新增
  7.     <ul class="level2">
  8.     <!-- 設定次選單項目 -->
  9.      <li class="ssubmenu">視窗</li>
  10.      <li class="ssubmenu">視窗</li>
  11.      <li class="ssubmenu">視窗</li>
  12.      <li class="ssubmenu">視窗</li>
  13.      <li class="ssubmenu">視窗</li>
  14.     </ul>
  15.    </li>
  16.   </ul>
  17. </li>
  18. <li class="mainmenu">檢視
  19.   <ul class="level1">
  20.    <li class="submenu">新增
  21.     <ul class="level2">
  22.      <li class="ssubmenu">視窗</li>
  23.      <li class="ssubmenu">視窗</li>
  24.      <li class="ssubmenu">視窗</li>
  25.      <li class="ssubmenu">視窗</li>
  26.     </ul>
  27.    </li>
  28.   </ul>
  29. </li>
  30. <li class="mainmenu">工具
  31.   <ul class="level1">
  32.    <li class="submenu">新增
  33.     <ul class="level2">
  34.      <li class="ssubmenu"><a href="http://www.tshopping.com.tw">視窗</a></li>
  35.      <li class="ssubmenu">視窗</li>
  36.      <li class="ssubmenu">視窗</li>
  37.      <li class="ssubmenu">視窗</li>
  38.     </ul>
  39.    </li>
  40.    <li class="submenu">開啟舊檔
  41.     <ul class="level2">
  42.      <li class="ssubmenu"><a href="http://www.tshopping.com.tw">視窗</a></li>
  43.      <li class="ssubmenu">視窗</li>
  44.      <li class="ssubmenu">視窗</li>
  45.      <li class="ssubmenu">視窗</li>
  46.     </ul>
  47.    </li>
  48.   </ul>
  49. </li>
  50. <li class="mainmenu">說明
  51.   <ul class="level1">
  52.    <li class="submenu">新增
  53.     <ul class="level2">
  54.      <li class="ssubmenu">視窗</li>
  55.      <li class="ssubmenu">視窗</li>
  56.      <li class="ssubmenu">視窗</li>
  57.      <li class="ssubmenu">視窗</li>
  58.     </ul>
  59.    </li>
  60.   </ul>
  61. </li>
  62. </ol>
複製代碼
作者: woff    時間: 2010-12-2 16:12
上面CSS就是在說這個

請自己實驗一下
作者: kyube    時間: 2011-8-2 00:59
真好。。。。。。。。。  
作者: axasko    時間: 2012-9-27 16:02
好贴，值得收藏，大家都顶
作者: 南瓜粉那    時間: 2014-7-29 17:09

  很可能是煮的




歡迎光臨 TShopping (http://www.tshopping.com.tw/) Powered by Discuz! X3.2