CSS打造经典鼠标触发显示选项

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
  2. <html xmlns="http://www.w3.org/1999/xhtml"> 
  3. <head> 
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
  5. <meta http-equiv="Content-Language" content="zh-CN" /> 
  6. <title>css打造鼠标触发效果</title> 
  7. <style type="text/css"> 
  8. <!-- 
  9. body { 
  10. margin: 0; 
  11. padding: 0; 
  12. color: #000; 
  13. font-size: 12px; 
  14. line-height: 160%; 
  15. text-align: left; 
  16. height: 100%; 
  17. font-family: '宋体',Tahoma ,arial,verdana,sans-serif,'Lucida Grande','Lucida Sans Unicode'; 
  18. } 
  19. *{ margin:0; padding:0;} 
  20. h2,h2 a:link,h2 a:hover,h2 a:visited{ 
  21. font-size: 14px; 
  22. text-decoration: none; 
  23. color: #000000; 
  24. } 
  25. .kw_from { 
  26. padding:20px 0 0 0px; 
  27. margin: auto; 
  28. height: 300px; 
  29. overflow: hidden; 
  30.  650px; 
  31. } 
  32. .kw_from .sbtn{ 
  33. float:left; 
  34. 80px; 
  35. padding: 16px 0 0 0; 
  36. } 
  37. .kw_from .searchMore{ 
  38. float:left; 
  39. 80px; 
  40. padding: 4px; 
  41. } 
  42. #searchNav { 
  43. 430px; 
  44. float: left; 
  45. } 
  46. #searchNav #conter1, #searchNav #conter3{ 
  47. float:left; 
  48. 250px; 
  49. } 
  50. #searchNav #conter2, #searchNav #conter4{ 
  51. float:left; 
  52. 180px; 
  53. } 
  54. #searchNav ul {  
  55. padding: 0; 
  56. margin: 0; 
  57. list-style: none; 
  58. } 
  59. #searchNav li { 
  60. float: left;  
  61. } 
  62. #searchNav li ul {  
  63. display: none;  
  64. top: 20px;  
  65. } 
  66. #searchNav li:hover ul, #searchNav li.over ul { 
  67. display: block; 
  68. float:left; 
  69. } 
  70. #searchNav ul li a{ 
  71. float:left; 
  72. display:block; 
  73. font-size:12px; 
  74. padding:3px; 
  75. text-decoration: none; 
  76. color: #777; 
  77. } 
  78. #searchNav ul li a:hover{ 
  79. background-color:#f4f4f4; 
  80. } 
  81. #searchNav #jobKw{ 
  82. 220px; 
  83. height:18px; 
  84. } 
  85. #searchNav #cityKw{ 
  86. 130px; 
  87. height:18px; 
  88. } 
  89. --> 
  90. </style> 
  91. <script type="text/javascript"> 
  92. <!--//--><![CDATA[//> 
  93. <!-- 
  94. startList = function() { 
  95. if (document.all&&document.getElementById) { 
  96. navRoot = document.getElementById("searchNav"); 
  97. for (i=0; i<navRoot.childNodes.length; i++) { 
  98. node = navRoot.childNodes[i]; 
  99. if (node.nodeName=="LI") { 
  100. node.onmouseover=function() { 
  101. this.className+=" over"; 
  102. } 
  103. node.onmouseout=function() { 
  104. this.className=this.className.replace(" over", ""); 
  105. } 
  106. } 
  107. } 
  108. } 
  109. } 
  110. window.onload=startList; 
  111. //--><!]]> 
  112. </script> 
  113. </head> 
  114. <body> 
  115. <div class="kw_from"> 
  116. <form action="/search.html" method="get" name="searchForm" id="searchForm" onsubmit="return check()"> 
  117.  
  118. <ul id="searchNav"> 
  119. <li id="conter1"><h2>找什么</h2> 
  120. <input id="jobKw" name="jobKw" type="text" /> 
  121. <ul id="conter3"> 
  122. <li><a href="#">会计</a> </li> 
  123. <li><a href="#">网页设计</a></li> 
  124. <li><a href="#">翻译</a></li> 
  125. <li><a href="#">家教</a></li>  
  126. <li><span class="moreCity"><a href="#">更多>> </a></span></li> 
  127. </ul> 
  128. </li> 
  129. <li id="conter2"><h2>在那里</h2> 
  130. <input id="cityKw" name="cityKw" type="text" /> 
  131. <ul id="conter4"> 
  132. <li><a href="#">北京</a> </li> 
  133. <li><a href="#">上海</a></li> 
  134. <li><a href="#">广州</a></li> 
  135. <li><a href="#">深圳</a></li> 
  136. <li><a href="#">南京</a></li> 
  137. <li><a href="#">天津</a></li> 
  138. <li><a href="#">杭州</a></li> 
  139. <li><a href="#">成都</a></li> 
  140. <li><a href="#">重庆</a></li> 
  141. <li><a href="#">武汉</a></li> 
  142. <li><a href="#">西安</a></li> 
  143. <li><a href="#">沈阳</a></li> 
  144. <li><span class="moreCity"><a href="#">更多城市>></a></span></li> 
  145. </ul> 
  146. </li> 
  147. </ul>  
  148. <div class="sbtn"> 
  149. <input name="submit" type="submit" class="btn4" style="margin:0px 15px 2px 0;" value="搜索工作" /> 
  150. </div> 
  151. <div class="searchMore"> 
  152. <a href="search_expert.html">高级搜索</a><br /><a href="search_sort.html">分类搜索</a> </div> 
  153. </form>  
  154. </div> 
  155. </body> 
  156. </html> 
【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/umgsai/p/3908166.html