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" onMouseOver="this.className='menu1'" 105 onMouseOut="this.className='menu2'">div+css 106 <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" onMouseOver="this.className='menu1'" 115 onMouseOut="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" onMouseOver="this.className='menu1'" 124 onMouseOut="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" onMouseOver="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>
