热线：18981385370  QQ：158418537  设为首页 | 加入收藏 
 
热门文章
  1. 1PHP模板引擎正则表达式技巧
  2. 2VPS主机常见问题与维护之linux篇
  3. 3CSS伪类(pseudo-class)
  4. 4说一说XML的属性
  5. 5MySQL复制的概述、安装、故障、技巧、工具
  6. 6域名解析记录解释大全
  7. 7HTML5之表单详解
  8. 8ASP.NET生成eurl.axd Http异常错误
  9. 9IMG Sprite：针对高对比度模式的优化技巧
  10. 10Asp.net网站性能优化
  11. 11SEO:网页设计的10个基本功
  12. 12MySQL数据库优化技巧（二）
联系我们

    中国风设计工作室
    电 话:18981385370
    Q   Q:158418537
    Emial:baikdmia@163.com
    网 址:www.zgf88.com

技术文章

CSS弹出下拉菜单

发布者：：中国风网站建设 　 发布时间： ：2010-06-08 01:32　浏览次数： ：

建站的朋友应该对CSS都不会陌生，这东西很强大，现在也很流行CSS＋DIV。这里就贴上一个用CSS弹出下拉菜单的代码：

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
  2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  3. <html xmlns="http://www.w3.org/1999/xhtml">  
  4. <head>  
  5. <FCK:meta http-equiv="Content-Type" content="text/html; charset=utf-8"  />  
  6. <title>中国风网站建设</title>  
  7. <style type="text/css">  
  8. .menu {  
  9. width:750px;  
  10. margin:0;  
  11. margin:50px auto;}  
  12. .menu ul {  
  13. padding:0;  
  14. margin:0;  
  15. list-style-type: none;}  
  16. .menu ul li {  
  17. float:left;  
  18. position:relative;}  
  19. .menu ul li a{  
  20. display:block;  
  21. text-align:center;  
  22. text-decoration:none;  
  23. width:104px;  
  24. height:30px;  
  25. line-height:30px;  
  26. color:#000;  
  27. border:1px solid #fff;  
  28. border-width:1px 1px 0 0;  
  29. background:#c9c9a7;  
  30. font-size:11px;}  
  31. .menu ul li:hover a{  
  32. color:#fff;  
  33. background:#0099FF;}  
  34. .menu ul li ul {  
  35. display: none;}  
  36. .menu ul li:hover ul {  
  37. display:block;  
  38. position:absolute;  
  39. top:31px;  
  40. left:0;  
  41. width:105px;}  
  42. .menu li:hover ul li a {  
  43. display:block;  
  44. background:#FF9933;  
  45. color:#000;}  
  46. .menu li:hover ul li a:hover {  
  47. background:#FF0033;  
  48. color:#fff;  
  49. }  
  50. </style>  
  51. <!--[if lte IE 6]>  
  52. <style type="text/css">  
  53. table {  
  54. border-collapse:collapse;  
  55. margin:0;  
  56. padding:0;}  
  57. .menu ul li a.hide {  
  58. display:none;}  
  59. .menu ul li a:hover {  
  60. color:#fff;  
  61. background:#0099FF;}  
  62. .menu li a:hover ul {  
  63. display:block;  
  64. position:absolute;  
  65. top:32px;  
  66. left:0;  
  67. width:105px;}  
  68. .menu li a:hover ul li a {  
  69. display:block;  
  70. background:#FF9933;  
  71. color:#000;}  
  72. .menu li a:hover ul li a:hover {  
  73. background:#FF0033;  
  74. color:#fff;}  
  75. </style>  
  76. <![endif]-->  
  77. </head>  
  78. <body>  
  79. <div class="menu">  
  80. <ul>  
  81. <li><a class="hide" href="#" _fcksavedurl="#" _fcksavedurl="#">首页</a>  
  82. <!--[if lte IE 6]>  
  83. <a href="#">中国风  
  84. <table><tr><td>  
  85. <![endif]-->  
  86. <ul>  
  87. <li><a href="#" _fcksavedurl="#" _fcksavedurl="#">中国风</a></li>  
  88. <li><a href="#" _fcksavedurl="#" _fcksavedurl="#">公司介绍</a></li>  
  89. <li><a href="#" _fcksavedurl="#" _fcksavedurl="#">公司介绍</a></li>  
  90. <li><a href="#" _fcksavedurl="#" _fcksavedurl="#">公司介绍</a></li>  
  91. <li><a href="#" _fcksavedurl="#" _fcksavedurl="#">公司介绍</a></li>  
  92. <li><a href="#" _fcksavedurl="#" _fcksavedurl="#">公司介绍</a></li>  
  93. <li><a href="#" _fcksavedurl="#" _fcksavedurl="#">公司介绍</a></li>  
  94. </ul>  
  95. <!--[if lte IE 6]>  
  96. </td></tr></table>  
  97. </a>  
  98. <![endif]-->  
  99. </li>  
  100. <li><a class="hide" href="#" _fcksavedurl="#" _fcksavedurl="#">中国风</a>  
  101. <!--[if lte IE 6]>  
  102. <a href="#">中国风  
  103. <table><tr><td>  
  104. <![endif]-->  
  105. <ul>  
  106. <li><a href="#" _fcksavedurl="#" _fcksavedurl="#">中国风</a></li>  
  107. <li><a href="#" _fcksavedurl="#" _fcksavedurl="#">公司介绍</a></li>  
  108. <li><a href="#" _fcksavedurl="#" _fcksavedurl="#">公司介绍</a></li>  
  109. <li><a href="#" _fcksavedurl="#" _fcksavedurl="#">公司介绍</a></li>  
  110. <li><a href="#" _fcksavedurl="#" _fcksavedurl="#">公司介绍</a></li>  
  111. <li><a href="#" _fcksavedurl="#" _fcksavedurl="#">公司介绍</a></li>  
  112. <li><a href="#" _fcksavedurl="#" _fcksavedurl="#">公司介绍</a></li>  
  113. </ul>  
  114. <!--[if lte IE 6]>  
  115. </td></tr></table>  
  116. </a>  
  117. <![endif]-->  
  118. </li>  
  119. <li><a class="hide" href="#" _fcksavedurl="#" _fcksavedurl="#">中国风</a>  
  120. <!--[if lte IE 6]>  
  121. <a href="#">中国风  
  122. <table><tr><td>  
  123. <![endif]-->  
  124. <ul>  
  125. <li><a href="#" _fcksavedurl="#" _fcksavedurl="#">公司介绍</a></li>  
  126. <li><a href="#" _fcksavedurl="#" _fcksavedurl="#">公司介绍</a></li>  
  127. <li><a href="#" _fcksavedurl="#" _fcksavedurl="#">公司介绍</a></li>  
  128. <li><a href="#" _fcksavedurl="#" _fcksavedurl="#">公司介绍</a></li>  
  129. <li><a href="#" _fcksavedurl="#" _fcksavedurl="#">公司介绍</a></li>  
  130. <li><a href="#" _fcksavedurl="#" _fcksavedurl="#">公司介绍</a></li>  
  131. <li><a href="#" _fcksavedurl="#" _fcksavedurl="#">公司介绍</a></li>  
  132. </ul>  
  133. <!--[if lte IE 6]>  
  134. </td></tr></table>  
  135. </a>  
  136. <![endif]-->  
  137. </li>  
  138. <li><a class="hide" href="#" _fcksavedurl="#" _fcksavedurl="#">首页</a>  
  139. <!--[if lte IE 6]>  
  140. <a href="#">首页  
  141. <table><tr><td>  
  142. <![endif]-->  
  143. <ul>  
  144. <li><a href="#" _fcksavedurl="#" _fcksavedurl="#">公司介绍</a></li>  
  145. <li><a href="#" _fcksavedurl="#" _fcksavedurl="#">公司介绍</a></li>  
  146. <li><a href="#" _fcksavedurl="#" _fcksavedurl="#">公司介绍</a></li>  
  147. <li><a href="#" _fcksavedurl="#" _fcksavedurl="#">公司介绍</a></li>  
  148. <li><a href="#" _fcksavedurl="#" _fcksavedurl="#">公司介绍</a></li>  
  149. <li><a href="#" _fcksavedurl="#" _fcksavedurl="#">公司介绍</a></li>  
  150. <li><a href="#" _fcksavedurl="#" _fcksavedurl="#">公司介绍</a></li>  
  151. </ul>  
  152. <!--[if lte IE 6]>  
  153. </td></tr></table>  
  154. </a>  
  155. <![endif]-->  
  156. </li>  
  157. <li><a class="hide" href="#" _fcksavedurl="#" _fcksavedurl="#">首页</a>  
  158. <!--[if lte IE 6]>  
  159. <a href="#">首页  
  160. <table><tr><td>  
  161. <![endif]-->  
  162. <ul>  
  163. <li><a href="#" _fcksavedurl="#" _fcksavedurl="#">公司介绍</a></li>  
  164. <li><a href="#" _fcksavedurl="#" _fcksavedurl="#">公司介绍</a></li>  
  165. <li><a href="#" _fcksavedurl="#" _fcksavedurl="#">公司介绍</a></li>  
  166. <li><a href="#" _fcksavedurl="#" _fcksavedurl="#">公司介绍</a></li>  
  167. <li><a href="#" _fcksavedurl="#" _fcksavedurl="#">公司介绍</a></li>  
  168. <li><a href="#" _fcksavedurl="#" _fcksavedurl="#">公司介绍</a></li>  
  169. <li><a href="#" _fcksavedurl="#" _fcksavedurl="#">公司介绍</a></li>  
  170. </ul>  
  171. <!--[if lte IE 6]>  
  172. </td></tr></table>  
  173. </a>a  
  174. <![endif]-->a  
  175. </li>  
  176. <li><a class="hide" href="#" _fcksavedurl="#" _fcksavedurl="#">首页</a>  
  177. <!--[if lte IE 6]>  
  178. <a href="#">首页  
  179. <table><tr><td>  
  180. <![endif]-->  
  181. <ul>  
  182. <li><a href="#" _fcksavedurl="#" _fcksavedurl="#">公司介绍</a></li>  
  183. <li><a href="#" _fcksavedurl="#" _fcksavedurl="#">公司介绍</a></li>  
  184. <li><a href="#" _fcksavedurl="#" _fcksavedurl="#">公司介绍</a></li>  
  185. <li><a href="#" _fcksavedurl="#" _fcksavedurl="#">公司介绍</a></li>  
  186. <li><a href="#" _fcksavedurl="#" _fcksavedurl="#">公司介绍</a></li>  
  187. <li><a href="#" _fcksavedurl="#" _fcksavedurl="#">公司介绍</a></li>  
  188. <li><a href="#" _fcksavedurl="#" _fcksavedurl="#">公司介绍</a></li>  
  189. </ul>  
  190. <!--[if lte IE 6]>  
  191. </td></tr></table>  
  192. </a>  
  193. <![endif]-->  
  194. </li>  
  195. <li><a class="hide" href="#" _fcksavedurl="#" _fcksavedurl="#">首页</a>  
  196. <!--[if lte IE 6]>  
  197. <a href="#">首页  
  198. <table><tr><td>  
  199. <![endif]-->  
  200. <ul>  
  201. <li><a href="#" _fcksavedurl="#" _fcksavedurl="#">公司介绍</a></li>  
  202. <li><a href="#" _fcksavedurl="#" _fcksavedurl="#">公司介绍</a></li>  
  203. <li><a href="#" _fcksavedurl="#" _fcksavedurl="#">公司介绍</a></li>  
  204. <li><a href="#" _fcksavedurl="#" _fcksavedurl="#">公司介绍</a></li>  
  205. <li><a href="#" _fcksavedurl="#" _fcksavedurl="#">公司介绍</a></li>  
  206. <li><a href="#" _fcksavedurl="#" _fcksavedurl="#">公司介绍</a></li>  
  207. <li><a href="#" _fcksavedurl="#" _fcksavedurl="#">公司介绍</a></li>  
  208. </ul>  
  209. <!--[if lte IE 6]>  
  210. </td></tr></table>  
  211. </a>  
  212. <![endif]-->  
  213. </li>  
  214. </ul>  
  215. <!-- clear the floats if required -->  
  216. <div class="clear"> </div>  
  217. </div>  
  218. </body>  
  219. </html>  

 

中国风网站建设，专注于中国企业信息化推广！ 对人以诚信，人不欺我；对事以诚信，事无不成
中国风设计工作室
电话:18981385370 QQ:158418537
Emial:baikdmia@163.com 网址:www.zgf88.com(中国风发发)
Copyright © ZGF.ALL RIGHTS RESERVED 蜀ICP备09036629号　版权所有
诚信为首  品质保证