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 <title>导航</title> 5 <style type="text/css"> 6 * 7 { 8 margin: 0; 9 padding: 0; 10 } 11 #nav 12 { 13 list-style-type: none; 14 margin-left: 10px; 15 } 16 #nav li 17 { 18 /*border: 1px solid black;*/ 19 border-bottom: 2px solid #C81623; 20 width: 100px; 21 height: 50px; 22 font-family: 微软雅黑; 23 font-size: 20px; 24 text-align: center; 25 line-height: 50px; /*background-color: red;*/ 26 float: left; 27 } 28 #nav #quanbu 29 { 30 width: 245px; 31 background-color: #B1191A; 32 color: White; 33 text-align: left; 34 padding-left: 10px; 35 } 36 37 #main 38 { 39 margin-left: 10px; 40 width: 255px; 41 list-style-type: none; 42 font-size: 18px; 43 font-family: 微软雅黑; 44 color: White; 45 background-color: #C81623; 46 float:left; 47 } 48 #main li 49 { 50 height: 40px; 51 line-height: 40px; /*border: 1px solid black;*/ 52 margin-left: 10px; 53 } 54 #yemian 55 { 56 border:1px solid red; 57 width: 500px; 58 height: 440px; 59 display: block; 60 float:left; 61 display:none; 62 } 63 </style> 64 <script type="text/javascript"> 65 onload = function () { 66 var tanchu = function () { 67 jiadian.onmouseover = function () { 68 yemian.style.display = "block"; 69 yemian.style.color = "Blue"; 70 yemian.style.background = "White"; 71 jiadian.style.color = "Black"; 72 jiadian.style.background = "White"; 73 } 74 jiadian.onmouseout = function () { 75 yemian.style.display = "none"; 76 jiadian.style.color = "White"; 77 jiadian.style.background = "#C81623"; 78 } 79 } 80 tanchu(); 81 } 82 </script> 83 </head> 84 <body> 85 <ul id="nav"> 86 <li id = "quanbu">全部商品分类</li> 87 <li>手机</li> 88 <li>电脑</li> 89 <li>家电</li> 90 <li>服装</li> 91 </ul> 92 <div style="clear: both;"> 93 <div id="container"> 94 <ul id="main"> 95 <li id="jiadian">家用电器</li> 96 <li id="shouji">手机、数码</li> 97 <li id="diannao">电脑、办公</li> 98 <li id="jiaju">家居、家具</li> 99 <li>男装、女装</li> 100 <li>化妆、清洁、宠物</li> 101 <li>鞋靴、箱包、珠宝</li> 102 <li>汽车</li> 103 <li>玩具、乐器</li> 104 <li>图书、音像</li> 105 <li>彩票、充值</li> 106 </ul> 107 </div> 108 <div id="yemian"> 109 <p> 110 11111111111111111 111 </p> 112 </div> 113 </body> 114 </html>
