首页>>导航菜单>>纯css下拉菜单,可以设置下拉菜单为多列(2013-10-22)

纯css下拉菜单,可以设置下拉菜单为多列

 和一般的下拉菜单不同处在于下拉的内容可以按照需求设置为1行2个，注意一点就是顺序是在table里面用td设置的，如果是数据库读取的话要先取得记录数后计算左右2列的数量

纯css下拉菜单,可以设置下拉菜单为多列
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

 

XML/HTML Code
  1. <DIV class=menu-bar>  
  2. <UL class=main-menu>  
  3.   <LI class=topLevel style="WIDTH: 139px"><A   
  4.   href="">Freejs.net演示</A>  
  5.   <DIV class=sub-menu>  
  6.   <TABLE>  
  7.     <TBODY>  
  8.     <TR>  
  9.       <TD vAlign=top>  
  10.         <UL>  
  11.           <LI class=sub-menu-li nowrap><A   
  12.           href=""   
  13.           nowrap>Engagement Rings</A>   
  14.           <LI class=sub-menu-li nowrap><A   
  15.           href=""   
  16.           nowrap>Wedding Sets</A>   
  17.             
  18.           </LI></UL></TD>  
  19.       <TD vAlign=top>  
  20.         <UL>  
  21.           <LI class=sub-menu-li nowrap><A   
  22.           href=""   
  23.           nowrap>Princess Diamonds</A>   
  24.           <LI class=sub-menu-li nowrap><A   
  25.           href=""   
  26.           nowrap>Marquise Diamonds</A>   
  27.          </LI></UL></TD></TR></TBODY></TABLE></DIV></LI>  
  28.   <LI class=topLevel style="WIDTH: 77px"><A   
  29.   href="rings/19/">RINGS</A>  
  30.   <DIV class=sub-menu>  
  31.   <TABLE>  
  32.     <TBODY>  
  33.     <TR>  
  34.       <TD vAlign=top>  
  35.         <UL>  
  36.           <LI class=sub-menu-li nowrap><A   
  37.           href=""   
  38.           nowrap>Diamond Rings</A>   
  39.           <LI class=sub-menu-li nowrap><A   
  40.           href=""   
  41.           nowrap>Gemstone Rings</A>   
  42.           <LI class=sub-menu-li nowrap><A   
  43.           href=""   
  44.           nowrap>Promise Rings</A>   
  45.           <LI class=sub-menu-li nowrap><A   
  46.           href=""   
  47.           nowrap>Colored Diamond Rings</A>   
  48.           <LI class=sub-menu-li nowrap><A   
  49.           href=""   
  50.           nowrap>Engagement Rings</A>   
  51.           <LI class=sub-menu-li nowrap><A   
  52.           href=""   
  53.           nowrap>Wedding Sets</A> </LI></UL></TD>  
  54.       <TD vAlign=top>  
  55.         <UL>  
  56.           <LI class=sub-menu-li nowrap><A   
  57.           href=""   
  58.           nowrap>Anniversary Rings</A>   
  59.           <LI class=sub-menu-li nowrap><A   
  60.           href=""   
  61.           nowrap>Wedding Bands</A>   
  62.           <LI class=sub-menu-li nowrap><A   
  63.           href=""   
  64.           nowrap>Sterling Silver Rings</A>   
  65.           <LI class=sub-menu-li nowrap><A   
  66.           href=""   
  67.           nowrap>Top Selling</A>   
  68.           <LI class=sub-menu-li nowrap><A   
  69.           href=""   
  70.           nowrap>Top Rated</A>   
  71.           <LI class=sub-menu-li nowrap><A   
  72.           href=""   
  73.           nowrap>Newest</A> </LI></UL></TD></TR></TBODY></TABLE></DIV></LI>  
  74.   
  75.   
  76.   
  77.   
  78.   </UL></DIV>  

 

CSS Code
  1. /* header */  
  2. #pageHeader {  
  3.     BACKGROUND: url(../images/header_back.jpg) repeat-x; MARGIN: 0px auto; WIDTH: 940px; HEIGHT: 99px; z-index:10000  
  4. }  
  5. #pageHeader TABLE TD {  
  6.     VERTICAL-ALIGN: top  
  7. }  
  8. #pageHeader TD.miscIcons IMG {  
  9.     MARGIN: 0px 3px  
  10. }  
  11. #pageHeader DIV.accountLinks {  
  12.     VERTICAL-ALIGN: top; PADDING-TOP: 10px; HEIGHT: 20px  
  13. }  
  14. #pageHeader DIV.accountLinks LI {  
  15.     BACKGROUND-POSITION: left 5px; PADDING-LEFT: 15px; FLOAT: rightright; MARGIN-LEFT: 10px; BACKGROUND-REPEAT: no-repeat; LIST-STYLE-TYPE: none  
  16. }  
  17. #pageHeader DIV.accountLinks LI A {  
  18.     FONT-WEIGHT: bold; FONT-SIZE: 11px; COLOR: white  
  19. }  
  20. #pageHeader .contactPhone{  
  21.     POSITION: relative; TOP: 25px; TEXT-ALIGN: center;  
  22. }  
  23. #pageHeader .contactPhone A{  
  24.     font-size:11px; color:#FFF; font-weight:bold  
  25. }  
  26. #pageHeader DIV.topSearchFromBox {  
  27.     MARGIN: 7px 0px  
  28. }  
  29. #pageHeader DIV.topSearchFromBox INPUT[type=text] {  
  30.     BORDER-TOP-WIDTH: 0px; PADDING-RIGHT: 3px; PADDING-LEFT: 3px; BORDER-LEFT-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; WIDTH: 250px; COLOR: #999; PADDING-TOP: 0px; HEIGHT: 23px; BORDER-RIGHT-WIDTH: 0px  
  31. }  
  32. #pageHeader DIV.topSearchFromBox INPUT[type=submit] {  
  33.     FONT-WEIGHT: bold; WIDTH: 95px; COLOR: #666  
  34. }  
  35. #pageHeader .topSubMenu LI {  
  36.     BORDER-RIGHT: white 1px solid; PADDING-RIGHT: 7px; PADDING-LEFT: 7px; FLOAT: rightright; PADDING-BOTTOM: 0px; PADDING-TOP: 0px; LIST-STYLE-TYPE: none  
  37. }  
  38. #pageHeader .topSubMenu LI A {  
  39.     FONT-WEIGHT: bold; FONT-SIZE: 11px; COLOR: white  
  40. }  
  41. #pageHeader .topSubMenu LI:first-child {  
  42.     PADDING-RIGHT: 0px; BORDER-RIGHT-WIDTH: 0px  
  43. }  
  44.   
  45. /* menu-bar */  
  46. .menu-bar {  
  47.     MARGIN: 0px auto; WIDTH: 940px;Z-INDEX:99999;position: relative;  
  48. }  
  49. .menu-bar UL {  
  50.     PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px  
  51. }  
  52. .menu-bar LI {  
  53.     PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px  
  54. }  
  55. .menu-bar A {  
  56.     FONT: bold 14px Garamond,serif; COLOR: #333  
  57. }  
  58. .menu-bar .main-menu {  
  59.     PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; BORDER-LEFT: #ccc 1px solid; PADDING-TOP: 0px; LIST-STYLE-TYPE: none; HEIGHT: 32px  
  60. }  
  61. .menu-bar .main-menu LI.topLevel {  
  62.     BORDER-RIGHT: #ccc 1px solid; FLOAT: left; VERTICAL-ALIGN: middle; PADDING-TOP: 6px; POSITION: relative; HEIGHT: 26px; TEXT-ALIGN: center  
  63. }  
  64. .menu-bar LI:hover {  
  65.     Z-INDEX: 128000; BACKGROUND-COLOR: #666  
  66. }  
  67. .menu-bar LI:hover A {  
  68.     COLOR: #fff; TEXT-DECORATION: none  
  69. }  
  70. .menu-bar LI:hover .sub-menu {  
  71.     DISPLAY: inline; Z-INDEX: 99999  
  72. }  
  73. .menu-bar LI:hover .sub-menu A {  
  74.     FONT: 12px Arial,sans-serif; COLOR: #9d0013  
  75. }  
  76. .menu-bar .sub-menu {  
  77.     BORDER-RIGHT: #9d0013 1px solid; PADDING-RIGHT: 17px; BORDER-TOP: #9d0013 1px solid; DISPLAY: none; PADDING-LEFT: 17px; LEFT: 0px; PADDING-BOTTOM: 11px; BORDER-LEFT: #9d0013 1px solid; PADDING-TOP: 11px; BORDER-BOTTOM: #9d0013 1px solid; WHITE-SPACE: nowrap; POSITION: absolute; TOP: 31px; BACKGROUND-COLOR: #fffdf0; TEXT-ALIGN: left  
  78. }  
  79. .menu-bar .sub-menu UL {  
  80.     PADDING-RIGHT: 0px; PADDING-LEFT: 0px; MARGIN-BOTTOM: 6px; PADDING-BOTTOM: 0px; MARGIN-RIGHT: 10px; PADDING-TOP: 0px; LIST-STYLE-TYPE: none; rem-float: left  
  81. }  
  82. .menu-bar .sub-menu LI.sub-menu-li {  
  83.     rem-line-height: 20px  
  84. }  
  85. .menu-bar .sub-menu LI.sub-menu-li A {  
  86.     PADDING-RIGHT: 5px; PADDING-LEFT: 5px; FLOAT: none; PADDING-BOTTOM: 2px; COLOR: #9d0013; PADDING-TOP: 2px; LIST-STYLE-TYPE: none; TEXT-ALIGN: left  
  87. }  
  88. .menu-bar .sub-menu LI.sub-menu-li:hover {  
  89.     rem-background-color: #9D0013  
  90. }  
  91. .menu-bar .sub-menu LI.sub-menu-li:hover A {  
  92.     TEXT-DECORATION: underline  
  93. }  
  94. .menu-bar .sub-menu LI:hover {  
  95.     BACKGROUND-COLOR: transparent  
  96. }  

 


原文地址:http://www.freejs.net/article_daohangcaidan_63.html