首页 > 代码库 > css-下拉菜单
css-下拉菜单
方式1:
1 <!DOCTYPE html> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 5 <title>CSS下拉菜单实例模块-www.divcss5.com</title> 6 <style> 7 body, ul, li { 8 background-color:white; 9 font-size:12px; 10 font-family:Arial, Helvetica, sans-serif; 11 margin:0px; 12 padding:0px; 13 } 14 a { 15 color:#000000; 16 text-decoration:none; 17 } 18 body { 19 text-align:center; 20 } 21 li { 22 display:inline; 23 list-style:none; 24 list-style-position:outside; 25 text-align:center; 26 font-weight:bold; 27 float:left; 28 } 29 .list a:link { 30 color:#336601; 31 text-decoration:none; 32 float:left; 33 width:100px; 34 padding:3px 5px 0px 5px; 35 } 36 .list a:visited { 37 color:#336601; 38 text-decoration:none; 39 float:left; 40 padding:3px 5px 0px 5px; 41 width:100px; 42 } 43 .list a:hover { 44 color:white; 45 float:left; 46 padding:3px 3px 0px 20px; 47 width:88px; 48 text-decoration:none; 49 background-color:#539D26; 50 } 51 .list a:active { 52 color:white; 53 float:left; 54 padding:3px 3px 0px 20px; 55 width:88px; 56 text-decoration:none; 57 background-color:#BD06B4; 58 } 59 #nav { 60 width:600px; 61 height:30px; 62 margin:0 auto; 63 padding:0px 5px; 64 text-align:center; 65 clear:both; 66 } 67 .list { 68 line-height:20px; 69 text-align:left; 70 padding:4px; 71 font-weight:normal; 72 } 73 .menu1 { 74 width:120px; 75 height:auto; 76 margin:6px 4px 0px 0px; 77 border:1px solid #9CDD75; 78 background-color:#F1FBEC; 79 color:#336601; 80 padding:6px 0px 0px 0px; 81 cursor:hand; 82 overflow-y:hidden; 83 filter:Alpha(opacity=70); 84 -moz-opacity:0.7; 85 } 86 .menu2 { 87 width:120px; 88 height:18px; 89 margin:6px 4px 0px 0px; 90 background-color:#F5F5F5; 91 color:#999999; 92 border:1px solid #EEE8DD; 93 padding:6px 0px 0px 0px; 94 overflow-y:hidden; 95 cursor:hand; 96 } 97 </style> 98 </head> 99 100 <body>101 <div>大家以后在以后运用时候可以扩展使用，更改为适合自己网页需求 <a href="http://www.divcss5.com/">css</a>。</div>102 <div id="nav">103 <ul>104 <li class="menu2" onm ouseOver="this.className=‘menu1‘"105 onm ouseOut="this.className=‘menu2‘">div+css106 <div class="list"> <a href="http://www.divcss5.com/">DIV CSS</a><br />107 <a href="#">我的首页</a><br />108 <a href="#">我的日志</a><br />109 <a href="#">我的日志</a><br />110 <a href="#">我的相册</a><br />111 <a href="#">我的收藏</a><br />112 </div>113 </li>114 <li class="menu2" onm ouseOver="this.className=‘menu1‘"115 onm ouseOut="this.className=‘menu2‘"><a href="http://www.divcss5.com/html/">HTML入门</a>116 <div class="list"> <a href="http://www.divcss5.com/html/">HTML入门</a><br />117 <a href="http://www.divcss5.com/html/h5.html">html是什么</a><br />118 <a href="#">我的日志</a><br />119 <a href="#">我的相册</a><br />120 <a href="#">我的收藏</a><br />121 </div>122 </li>123 <li class="menu2" onm ouseOver="this.className=‘menu1‘"124 onm ouseOut="this.className=‘menu2‘"><a href="http://www.divcss5.com/rumen/">CSS入门</a>125 <div class="list"> <a href="http://www.divcss5.com/">DIVCSS5</a><br />126 <a href="#">我的相册</a><br />127 <a href="#">我的收藏</a><br />128 </div>129 </li>130 <li class="menu2" onm ouseOver="this.className=‘menu1‘" 131 onMouseOut="this.className=‘menu2‘"> <a href="http://www.divcss5.com/css-hack/">CSS HACK</a>132 <div class="list"> <a href="http://www.divcss5.com/">DIV+CSS</a><br />133 <a href="#">我的首页</a><br />134 <a href="#">我的日志</a><br />135 <a href="#">我的相册</a><br />136 <a href="#">我的收藏</a><br />137 </div>138 </li>139 </ul>140 </div>141 </body>142 </html>
方式2:
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 <title>无标题文档</title> 6 <style type="text/css"> 7 #nav { 8 padding:0; 9 margin:0;10 list-style:none;11 }12 #nav li {13 float:left;14 position:relative;15 width:10em;16 border:1px solid #b0c4de;17 background-color:#e7edf5;18 color:#2d486c;19 font-size:80%;20 margin-right:1em;21 }22 #nav a:link, #nav a:visited {23 display:block;24 text-decoration:none;25 padding-left:1em;26 color:#2d486c;27 }28 29 #nav ul {30 display:none;31 position:relative;32 padding:0;33 }34 #nav ul li {35 border:0 none transparent;36 border-bottom:1px solid #e7edf5;37 border-top:.5em solid #fff;38 background-color:#f1f5f9;39 font-size:100%;40 margin-bottom:-1px;41 margin-top:1px;42 padding:0;43 list-style-type:none;44 }45 #nav li:hover ul {46 display:block;47 }48 </style>49 </head>50 51 <body>52 <ul id="nav">53 <li><a href="#">starters</a>54 <ul>55 <li><a href="#">fish</a></li>56 <li><a href="#">book</a></li>57 <li><a href="#">food</a></li>58 </ul>59 </li>60 <li><a href="#">main course</a>61 <ul>62 <li><a href="#">math</a></li>63 <li><a href="#">english</a></li>64 <li><a href="#">chinese</a></li>65 </ul>66 </li>67 <li><a href="#">car</a>68 <ul>69 <li><a href="#">benz</a></li>70 <li><a href="#">bmw</a></li>71 <li><a href="#">changcheng</a></li>72 </ul>73 </li>74 </ul>75 </body>76 </html>
css-下拉菜单
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。