Discuz!官方免费开源建站系统

 找回密码
 立即注册

QQ登录

只需一步,快速开始

搜索

[素材] 自己搞的黑光的二级菜单,还不错!

[复制链接]
淄博SEO 发表于 2012-4-26 12:53:21 | 显示全部楼层 |阅读模式

宽度可以自己调整,非常好用,觉得不错就顶一下~
  1. <div id="mu" class="cl">
  2. </div>
  3. <div class="a_mu">
  4. <style>
  5. .category ul.width220{width:225px;}
  6. .category ul.width100{width:100px;}
  7. .category ul.width130{width:130px;}
  8. .category ul.width50{width:50px;}
  9. .wall {
  10. width: 950px;
  11. margin: 10px auto;
  12. }
  13. .category ul li.h_icon a, .category ul li.reds a {
  14. color: #F30;
  15. }
  16. .category ul li.h_icon {
  17. position: relative;
  18. }
  19. .category ul.mr0 {
  20. margin-right: 0;
  21. }
  22. .category ul li img.new_icon {
  23. position: absolute;
  24. top: 4px;
  25. }
  26. .view-hover {
  27. zoom: 1;
  28. list-style-position: outside;
  29. }
  30. .category_left {
  31. background: url(http://www.hylsy.com/images/qunchong_koolan/bbs_header_bg.png) 0 -388px no-repeat;
  32. width: 45px;
  33. height: 52px;
  34. float: left;
  35. }
  36. .category p {
  37. width: 16px;
  38. font-size: 14px;
  39. color: #7C1C06;
  40. position: relative;
  41. top: 5px;
  42. font-weight: 700;
  43. line-height: 20px;
  44. margin: 0 0 0 12px;
  45. }
  46. .category ul {
  47. height: 49px;
  48. float: left;
  49. background: url(http://www.hylsy.com/images/qunchong_koolan/bbs_header_bg.png) right -459px no-repeat;
  50. margin-right: 18px;
  51. padding: 3px 0 0;
  52. }
  53. .category ul li {
  54. float: left;
  55. font-size: 14px;
  56. display: inline;
  57. height: 23px;
  58. line-height: 23px;
  59. padding: 0 7px;
  60. }
  61. .category ul li a {
  62. color: #666;
  63. }
  64. .blank10 {
  65. clear: both;
  66. height: 0;
  67. overflow: hidden;
  68. }
  69. </style>
  70. <div class="wall">
  71. <div>

  72. <div class="category">
  73. <div class="category_left"><p>版务</p></div>
  74. <ul class="width50">
  75. <li><a  target="_self">公告</a></li>
  76. <li><a  target="_self">活动</a></li>
  77. </ul>
  78. </div>
  79. <div class="category">
  80. <div class="category_left"><p>学院</p></div>
  81. <ul class="width130">
  82. <li><a  target="_self">入门</a></li>
  83. <li><a  target="_self">技巧</a></li>
  84. <li><a  target="_self">后期</a></li>
  85. <li><a  target="_self">器材</a></li>
  86. <li class="h_icon"><a  target="_self">课程</a><img src="http://www.hylsy.com/images/qunchong_koolan/hot.gif" class="new_icon"></li>
  87. <li><a  target="_self">化妆</a></li>
  88. </ul>
  89. <div class="category">
  90. <div class="category_left"><p>发布</p></div>
  91. <ul class="width220">
  92. <li class="h_icon">
  93. <a  target="_self">婚纱摄影</a>
  94. <img src="http://www.hylsy.com/images/qunchong_koolan/hot.gif" class="new_icon"></li>
  95. <li><a  target="_self">人像摄影</a></li>
  96. <li><a  target="_self">驴友摄影</a></li>
  97. <li><a  target="_self">大杂烩</a></li>
  98. <li><a  target="_self">民俗与纪实</a></li>
  99. <li><a  target="_self">动植物微距</a></li>
  100. </ul>
  101. </div>
  102. <div class="category">
  103. <div class="category_left"><p>互动</p></div>
  104. <ul class="width130">
  105. <li class="h_icon">
  106. <a  target="_self">客栈</a><img src="http://www.hylsy.com/images/qunchong_koolan/hot.gif" class="new_icon"></li>
  107. <li><a  target="_self">策划</a></li>
  108. <li><a  target="_self">经营</a></li>
  109. <li><a  target="_self">网销</a></li>
  110. <li><a  target="_self">器材</a></li>
  111. <li><a  target="_self">装修</a></li>
  112. </ul>
  113. </div>

  114. </div>
  115. <div class="category">
  116. <div class="category_left"><p>信息</p></div>
  117. <ul class="width100">
  118. <li class="h_icon"><a  target="_self">转让</a><img src="http://www.hylsy.com/images/qunchong_koolan/hot.gif" class="new_icon"></li>
  119. <li><a  target="_self">招聘</a></li>
  120. <li><a  target="_self">交易</a></li>
  121. <li><a  target="_self">工作室</a></li>
  122. </ul>
  123. </div>
  124. <div class="blank10"></div>
  125. </div>
  126. </div>
  127. <p class="clr"></p>
  128. </div>
复制代码

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有账号?立即注册

x
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

手机版|小黑屋|Discuz! 官方站 ( 皖ICP备16010102号 )star

GMT+8, 2024-11-16 13:55 , Processed in 0.034732 second(s), 6 queries , Gzip On, Redis On.

Powered by Discuz! X3.4

Copyright © 2001-2023, Tencent Cloud.

快速回复 返回顶部 返回列表