当前位置： 代码迷 >> HTML/CSS >> 纯CSS的特大型下拉菜单,支持放图片在下拉导航里面
  详细解决方案

纯CSS的特大型下拉菜单,支持放图片在下拉导航里面

热度：1356   发布时间：2014-03-01 00:37:06.0
纯CSS的大型下拉菜单,支持放图片在下拉导航里面

纯CSS的大型下拉菜单,支持放图片在下拉导航里面

效果非常漂亮，也很实用，小型，中型网站均可使用

演示

?

?

XML/HTML Code
  1. <ul?id="menu">??
  2. ??????
  3. ????<li><a?href="http://www.freejs.net"?class="drop">首页</a><!--?Begin?Home?Item?-->??
  4. ??????
  5. ????????<div?class="dropdown_2columns"><!--?Begin?2?columns?container?-->??
  6. ??????
  7. ????????????<div?class="col_2">??
  8. ????????????????<h2>欢迎访问</h2>??
  9. ????????????</div>??
  10. ??????
  11. ????????????<div?class="col_2">??
  12. ????????????????<p>本站提供的所有代码均可以正常演示，您可以在demo中看到。</p>???????????????
  13. ????????????????<p>freejs-付费下载Web演示,导航菜单,TAB标签,焦点图,图片特效,分页,表单,收费下载各种网页特效.</p>???????????????
  14. ????????????</div>??
  15. ??????
  16. ????????????<div?class="col_2">??
  17. ????????????????<h2><a?href="http://www.freejs.net/biaodan.html">表单演示</a></h2>??
  18. ????????????</div>??
  19. ??????????????
  20. ????????????<div?class="col_1">??
  21. ????????????????<img?src="http://www.freejs.net/images/logo.png"?height="47"?width="150"?alt="freejs首页"?/>??
  22. ????????????</div>??
  23. ??????????????
  24. ????????????<div?class="col_1">??
  25. ????????????????<p>支持所有浏览器的大型导航菜单，可以加图片</p>??
  26. ????????????</div>??
  27. ????????????
  28. ????????</div><!--?End?2?columns?container?-->??
  29. ??????
  30. ????</li><!--?End?Home?Item?-->??
  31. ??
  32. ????<li><a?href=""?class="drop">显示4列</a><!--?Begin?4?columns?Item?-->??
  33. ??????
  34. ????????<div?class="dropdown_4columns"><!--?Begin?4?columns?container?-->??
  35. ??????????
  36. ????????????<div?class="col_4">??
  37. ????????????????<h2>This?is?a?heading?title</h2>??
  38. ????????????</div>??
  39. ??????????????
  40. ????????????<div?class="col_1">??
  41. ??????????????
  42. ????????????????<h3>分类</h3>??
  43. ????????????????<ul>??
  44. ????????????????????<li><a?href="http://www.freejs.net/daohangcaidan.html"?title="各种下拉菜单,导航,多级菜单,右侧展开,左侧展开">导航菜单</a></li>??
  45. ???????????<li><a?href="http://www.freejs.net/tabbiaoqian.html"?title="tab标签,选项卡，选卡">TAB标签</a></li>??
  46. ???????????<li><a?href="http://www.freejs.net/jiaodiantu.html"?title="焦点图,相册,幻灯片">焦点图</a></li>??
  47. ???????????<li><a?href="http://www.freejs.net/fenye.html"?title="翻页,分页??
  48. 本站演示中的分页数据库结构都一样的">分页</a></li>??
  49. ???????????<li><a?href="http://www.freejs.net/biaodan.html"?title="表单">表单</a></li>??
  50. ???????????<li><a?href="http://www.freejs.net/jquerytupiantexiao.html"?title="Jquery图片特效">Jquery图片</a></li>??
  51. ???????????<li><a?href="http://www.freejs.net/jquerywenzi.html"?title="jquery文字特效,js文字特效">Jquery文字</a></li>??
  52. ????????????????</ul>?????
  53. ???????????????????
  54. ????????????</div>??
  55. ??????
  56. ????????????<div?class="col_1">??
  57. ??????????????
  58. ????????????????<h3>Useful?Links</h3>??
  59. ????????????????<ul>??
  60. ????????????????????<li><a?href="">NetTuts</a></li>??
  61. ????????????????????<li><a?href="">VectorTuts</a></li>??
  62. ????????????????????<li><a?href="">PsdTuts</a></li>??
  63. ????????????????????<li><a?href="">PhotoTuts</a></li>??
  64. ????????????????????<li><a?href="">ActiveTuts</a></li>??
  65. ????????????????</ul>?????
  66. ???????????????????
  67. ????????????</div>??
  68. ??????
  69. ????????????<div?class="col_1">??
  70. ??????????????
  71. ????????????????<h3>Other?Stuff</h3>??
  72. ????????????????<ul>??
  73. ????????????????????<li><a?href="">FreelanceSwitch</a></li>??
  74. ????????????????????<li><a?href="">Creattica</a></li>??
  75. ????????????????????<li><a?href="">WorkAwesome</a></li>??
  76. ????????????????????<li><a?href="">Mac?Apps</a></li>??
  77. ????????????????????<li><a?href="">Web?Apps</a></li>??
  78. ????????????????</ul>?????
  79. ???????????????????
  80. ????????????</div>??
  81. ??????
  82. ????????????<div?class="col_1">??
  83. ??????????????
  84. ????????????????<h3>Misc</h3>??
  85. ????????????????<ul>??
  86. ????????????????????<li><a?href="">Design</a></li>??
  87. ????????????????????<li><a?href="">Logo</a></li>??
  88. ????????????????????<li><a?href="">Flash</a></li>??
  89. ????????????????????<li><a?href="">Illustration</a></li>??
  90. ????????????????????<li><a?href="">More...</a></li>??
  91. ????????????????</ul>?????
  92. ???????????????????
  93. ????????????</div>??
  94. ??????????????
  95. ????????</div><!--?End?4?columns?container?-->??
  96. ??????
  97. ????</li><!--?End?4?columns?Item?-->??
  98. ??
  99. ????<li?class="menu_right"><a?href=""?class="drop">显示在右侧的1列</a>??
  100. ??????
  101. ????????<div?class="dropdown_1column?align_right">??
  102. ??????????
  103. ????????????????<div?class="col_1">??
  104. ??????????????????
  105. ????????????????????<ul?class="simple">??
  106. ????????????????????????<li><a?href="http://www.freejs.net/daohangcaidan.html"?title="各种下拉菜单,导航,多级菜单,右侧展开,左侧展开">导航菜单</a></li>??
  107. ???????????<li><a?href="http://www.freejs.net/tabbiaoqian.html"?title="tab标签,选项卡，选卡">TAB标签</a></li>??
  108. ???????????<li><a?href="http://www.freejs.net/jiaodiantu.html"?title="焦点图,相册,幻灯片">焦点图</a></li>??
  109. ???????????<li><a?href="http://www.freejs.net/fenye.html"?title="翻页,分页??
  110. 本站演示中的分页数据库结构都一样的">分页</a></li>??
  111. ???????????<li><a?href="http://www.freejs.net/biaodan.html"?title="表单">表单</a></li>??
  112. ???????????<li><a?href="http://www.freejs.net/jquerytupiantexiao.html"?title="Jquery图片特效">Jquery图片</a></li>??
  113. ???????????<li><a?href="http://www.freejs.net/jquerywenzi.html"?title="jquery文字特效,js文字特效">Jquery文字</a></li>??
  114. ????????????????????</ul>?????
  115. ???????????????????????
  116. ????????????????</div>??
  117. ??????????????????
  118. ????????</div>??
  119. ??????????
  120. ????</li>??
  121. ??
  122. ????<li?class="menu_right"><a?href=""?class="drop">3?columns</a><!--?Begin?3?columns?Item?-->??
  123. ??????
  124. ????????<div?class="dropdown_3columns?align_right"><!--?Begin?3?columns?container?-->??
  125. ??????????????
  126. ????????????<div?class="col_3">??
  127. ????????????????<h2>Lists?in?Boxes</h2>??
  128. ????????????</div>??
  129. ??????????????
  130. ????????????<div?class="col_1">??
  131. ??????
  132. ????????????????<ul?class="greybox">??
  133. ????????????????????<li><a?href="">FreelanceSwitch</a></li>??
  134. ????????????????????<li><a?href="">Creattica</a></li>??
  135. ??
  136. ????????????????</ul>?????
  137. ??????
  138. ????????????</div>??
  139. ??????????????
  140. ????????????<div?class="col_1">??
  141. ??????
  142. ????????????????<ul?class="greybox">??
  143. ????????????????????<li><a?href="">ThemeForest</a></li>??
  144. ????????????????????<li><a?href="">GraphicRiver</a></li>??
  145. ??
  146. ????????????????</ul>?????
  147. ??????
  148. ????????????</div>??
  149. ??????????????
  150. ????????????<div?class="col_1">??
  151. ??????
  152. ????????????????<ul?class="greybox">??
  153. ????????????????????<li><a?href="">Design</a></li>??
  154. ????????????????????<li><a?href="">Logo</a></li>??
  155. ??
  156. ????????????????</ul>?????
  157. ??????
  158. ????????????</div>??
  159. ??????????????
  160. ????????????<div?class="col_3">??
  161. ????????????????<h2>Here?are?some?image?examples</h2>??
  162. ????????????</div>??
  163. ??????????????
  164. ????????????<div?class="col_3">??
  165. ????????????????<img?src="../erlianhaote.png"?width="70"?height="70"?class="img_left?imgshadow"?alt=""?/>??
  166. ????????????????<p>二连浩特</p>??
  167. ??????
  168. ????????????????<img?src="../mohe.png"?width="70"?height="70"?class="img_left?imgshadow"?alt=""?/>??
  169. ????????????????<p>纯CSS的大型下拉菜单,支持放图片在下来导航里面</p>??
  170. ????????????</div>??
  171. ??????????
  172. ????????</div><!--?End?3?columns?container?-->??
  173. ??????????
  174. ????</li><!--?End?3?columns?Item?-->??
  175. </ul>??

?既然是css导航，css文件当然必不可少

?

CSS Code
  1. body,?ul,?li?{??
  2. ????font-size:14px;???
  3. ????font-family:Arial,?Helvetica,?sans-serif;??
  4. ????line-height:21px;??
  5. ????text-align:left;??
  6. }??
  7. ??
  8. #menu?{??
  9. ????list-style:none;??
  10. ????width:740px;??
  11. ????margin:30px?auto?0px?auto;??
  12. ????height:43px;??
  13. ????padding:0px?20px?0px?20px;??
  14. ??
  15. ????/*?Rounded?Corners?*/??
  16. ??????
  17. ????-moz-border-radius:?10px;??
  18. ????-webkit-border-radius:?10px;??
  19. ????border-radius:?10px;??
  20. ??
  21. ????/*?Background?color?and?gradients?*/??
  22. ??????
  23. ????background:?#014464;??
  24. ????background:?-moz-linear-gradient(top,?#0272a7,?#013953);??
  25. ????background:?-webkit-gradient(linear,?0%?0%,?0%?100%,?from(#0272a7),?to(#013953));??
  26. ??????
  27. ????/*?Borders?*/??
  28. ??????
  29. ????border:?1px?solid?#002232;??
  30. ??
  31. ????-moz-box-shadow:inset?0px?0px?1px?#edf9ff;??
  32. ????-webkit-box-shadow:inset?0px?0px?1px?#edf9ff;??
  33. ????box-shadow:inset?0px?0px?1px?#edf9ff;??
  34. }??
  35. ??
  36. #menu?li?{??
  37. ????float:left;??
  38. ????display:block;??
  39. ????text-align:center;??
  40. ????position:relative;??
  41. ????padding:?4px?10px?4px?10px;??
  42. ????margin-right:30px;??
  43. ????margin-top:7px;??
  44. ????border:none;??
  45. }??
  46. ??
  47. #menu?li:hover?{??
  48. ????border:?1px?solid?#777777;??
  49. ????padding:?4px?9px?4px?9px;??
  50. ??????
  51. ????/*?Background?color?and?gradients?*/??
  52. ??????
  53. ????background:?#F4F4F4;??
  54. ????background:?-moz-linear-gradient(top,?#F4F4F4,?#EEEEEE);??
  55. ????background:?-webkit-gradient(linear,?0%?0%,?0%?100%,?from(#F4F4F4),?to(#EEEEEE));??
  56. ??????
  57. ????/*?Rounded?corners?*/??
  58. ??????
  59. ????-moz-border-radius:?5px?5px?0px?0px;??
  60. ????-webkit-border-radius:?5px?5px?0px?0px;??
  61. ????border-radius:?5px?5px?0px?0px;??
  62. }??
  63. ??
  64. #menu?li?a?{??
  65. ????font-family:Arial,?Helvetica,?sans-serif;??
  66. ????font-size:14px;???
  67. ????color:?#EEEEEE;??
  68. ????display:block;??
  69. ????outline:0;??
  70. ????text-decoration:none;??
  71. ????text-shadow:?1px?1px?1px?#000;??
  72. }??
  73. ??
  74. #menu?li:hover?a?{??
  75. ????color:#161616;??
  76. ????text-shadow:?1px?1px?1px?#ffffff;??
  77. }??
  78. #menu?li?.drop?{??
  79. ????padding-right:21px;??
  80. ????background:url("img/drop.png")?no-repeat?rightright?8px;??
  81. }??
  82. #menu?li:hover?.drop?{??
  83. ????background:url("img/drop.png")?no-repeat?rightright?7px;??
  84. }??
  85. ??
  86. .dropdown_1column,???
  87. .dropdown_2columns,???
  88. .dropdown_3columns,???
  89. .dropdown_4columns,??
  90. .dropdown_5columns?{??
  91. ????margin:4px?auto;??
  92. ????float:left;??
  93. ????position:absolute;??
  94. ????left:-999em;?/*?Hides?the?drop?down?*/??
  95. ????text-align:left;??
  96. ????padding:10px?5px?10px?5px;??
  97. ????border:1px?solid?#777777;??
  98. ????border-top:none;??
  99. ??????
  100. ????/*?Gradient?background?*/??
  101. ????background:#F4F4F4;??
  102. ????background:?-moz-linear-gradient(top,?#EEEEEE,?#BBBBBB);??
  103. ????background:?-webkit-gradient(linear,?0%?0%,?0%?100%,?from(#EEEEEE),?to(#BBBBBB));??
  104. ??
  105. ????/*?Rounded?Corners?*/??
  106. ????-moz-border-radius:?0px?5px?5px?5px;??
  107. ????-webkit-border-radius:?0px?5px?5px?5px;??
  108. ????border-radius:?0px?5px?5px?5px;??
  109. }??
  110. ??
  111. .dropdown_1column?{width:?140px;}??
  112. .dropdown_2columns?{width:?280px;}??
  113. .dropdown_3columns?{width:?420px;}??
  114. .dropdown_4columns?{width:?560px;}??
  115. .dropdown_5columns?{width:?700px;}??
  116. ??
  117. #menu?li:hover?.dropdown_1column,???
  118. #menu?li:hover?.dropdown_2columns,???
  119. #menu?li:hover?.dropdown_3columns,??
  120. #menu?li:hover?.dropdown_4columns,??
  121. #menu?li:hover?.dropdown_5columns?{??
  122. ????left:-1px;??
  123. ????top:auto;??
  124. }??
  125. ??
  126. .col_1,??
  127. .col_2,??
  128. .col_3,??
  129. .col_4,??
  130. .col_5?{??
  131. ????display:inline;??
  132. ????float:?left;??
  133. ????position:?relative;??
  134. ????margin-left:?5px;??
  135. ????margin-right:?5px;??
  136. }??
  137. .col_1?{width:130px;}??
  138. .col_2?{width:270px;}??
  139. .col_3?{width:410px;}??
  140. .col_4?{width:550px;}??
  141. .col_5?{width:690px;}??
  142. ??
  143. #menu?.menu_right?{??
  144. ????float:rightright;??
  145. ????margin-right:0px;??
  146. }??
  147. #menu?li?.align_right?{??
  148. ????/*?Rounded?Corners?*/??
  149. ????-moz-border-radius:?5px?0px?5px?5px;??
  150. ????-webkit-border-radius:?5px?0px?5px?5px;??
  151. ????border-radius:?5px?0px?5px?5px;??
  152. }??
  153. ??
  154. #menu?li:hover?.align_right?{??
  155. ????left:auto;??
  156. ????rightright:-1px;??
  157. ????top:auto;??
  158. }??
  159. ??
  160. #menu?p,?#menu?h2,?#menu?h3,?#menu?ul?li?{??
  161. ????font-family:Arial,?Helvetica,?sans-serif;??
  162. ????line-height:21px;??
  163. ????font-size:12px;??
  164. ????text-align:left;??
  165. ????text-shadow:?1px?1px?1px?#FFFFFF;??
  166. }??
  167. #menu?h2?{??
  168. ????font-size:21px;??
  169. ????font-weight:400;??
  170. ????letter-spacing:-1px;??
  171. ????margin:7px?0?14px?0;??
  172. ????padding-bottom:14px;??
  173. ????border-bottom:1px?solid?#666666;??
  174. }??
  175. #menu?h3?{??
  176. ????font-size:14px;??
  177. ????margin:7px?0?14px?0;??
  178. ????padding-bottom:7px;??
  179. ????border-bottom:1px?solid?#888888;??
  180. }??
  181. #menu?p?{??
  182. ????line-height:18px;??
  183. ????margin:0?0?10px?0;??
  184. }??
  185. ??
  186. #menu?li:hover?div?a?{??
  187. ????font-size:12px;??
  188. ????color:#015b86;??
  189. }??
  190. #menu?li:hover?div?a:hover?{??
  191. ????color:#029feb;??
  192. }??
  193. ??
  194. ??
  195. .strong?{??
  196. ????font-weight:bold;??
  197. }??
  198. .italic?{??
  199. ????font-style:italic;??
  200. }??
  201. ??
  202. .imgshadow?{?/*?Better?style?on?light?background?*/??
  203. ????background:#FFFFFF;??
  204. ????padding:4px;??
  205. ????border:1px?solid?#777777;??
  206. ????margin-top:5px;??
  207. ????-moz-box-shadow:0px?0px?5px?#666666;??
  208. ????-webkit-box-shadow:0px?0px?5px?#666666;??
  209. ????box-shadow:0px?0px?5px?#666666;??
  210. }??
  211. .img_left?{?/*?Image?sticks?to?the?left?*/??
  212. ????width:auto;??
  213. ????float:left;??
  214. ????margin:5px?15px?5px?5px;??
  215. }??
  216. ??
  217. #menu?li?.black_box?{??
  218. ????background-color:#333333;??
  219. ????color:?#eeeeee;??
  220. ????text-shadow:?1px?1px?1px?#000;??
  221. ????padding:4px?6px?4px?6px;??
  222. ??
  223. ????/*?Rounded?Corners?*/??
  224. ????-moz-border-radius:?5px;??
  225. ????-webkit-border-radius:?5px;??
  226. ????border-radius:?5px;??
  227. ??
  228. ????/*?Shadow?*/??
  229. ????-webkit-box-shadow:inset?0?0?3px?#000000;??
  230. ????-moz-box-shadow:inset?0?0?3px?#000000;??
  231. ????box-shadow:inset?0?0?3px?#000000;??
  232. }??
  233. ??
  234. #menu?li?ul?{??
  235. ????list-style:none;??
  236. ????padding:0;??
  237. ????margin:0?0?12px?0;??
  238. }??
  239. #menu?li?ul?li?{??
  240. ????font-size:12px;??
  241. ????line-height:24px;??
  242. ????position:relative;??
  243. ????text-shadow:?1px?1px?1px?#ffffff;??
  244. ????padding:0;??
  245. ????margin:0;??
  246. ????float:none;??
  247. ????text-align:left;??
  248. ????width:130px;??
  249. }??
  250. #menu?li?ul?li:hover?{??
  251. ????background:none;??
  252. ????border:none;??
  253. ????padding:0;??
  254. ????margin:0;??
  255. }??
  256. ??
  257. #menu?li?.greybox?li?{??
  258. ????background:#F4F4F4;??
  259. ????border:1px?solid?#bbbbbb;??
  260. ????margin:0px?0px?4px?0px;??
  261. ????padding:4px?6px?4px?6px;??
  262. ????width:116px;??
  263. ??
  264. ????/*?Rounded?Corners?*/??
  265. ????-moz-border-radius:?5px;??
  266. ????-webkit-border-radius:?5px;??
  267. ????-khtml-border-radius:?5px;??
  268. ????border-radius:?5px;??
  269. }??
  270. #menu?li?.greybox?li:hover?{??
  271. ????background:#ffffff;??
  272. ????border:1px?solid?#aaaaaa;??
  273. ????padding:4px?6px?4px?6px;??
  274. ????margin:0px?0px?4px?0px;??
  275. }??


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

  相关解决方案

代码迷 - 您身边的软件异常，代码异常，编程异常助手（发现，解决，分享）
Copyright © 2009-2013 DAIMAMI.COM. All rights reserved.