摘要：
京东导航在中间添加了一个弹出框条，使用位置定位，并将其放置在左栏的li标签中形成一个整体，确保鼠标在弹出框中时弹出框不会消失：1117118119120121seckill122优惠券123闪购˂/li＞124拍卖˂/li˂125126127128˂！
京东导航，添加中间的弹框栏，使用position定位，放在左侧栏的li标签里面，成为一个整体，保证鼠标在弹框里的时候，弹框不消失：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <script src="jquery.js"type="text/javascript"></script> 7 <style type="text/css"> 8 *{ 9 margin:0; 10 } 11 #head img{ 12 position:absolute; 13 left:50%; 14 margin-left:-595px; 15 } 16 #head{ 17 position:relative; 18 width:100%; 19 height:80px; 20 background-color:#f00; 21 } 22 .clear{ 23 clear:both; 24 } 25 #nav li{ 26 list-style:none; 27 float:left; 28 border:1px solid #000; 29 font-family:微软雅黑; 30 font-weight:bold; 31 cursor:pointer; 32 margin-left:10px; 33 34 } 35 #nav{ 36 margin-left:200px; 37 } 38 #left li{ 39 list-style:none; 40 margin-top:0px; 41 border:1px solid #000; 42 padding-top:2px; 43 padding-bottom:2px; 44 padding-left:10px; 45 font-family:微软雅黑; 46 color:#fff; 47 } 48 49 #left ul{ 50 background-color:#888; 51 width:190px; 52 height:480px; 53 margin-left:50px; 54 margin-top:10px; 55 padding-top:10px; 56 padding-left:0px; 57 } 58 #left span{ 59 cursor:pointer; 60 } 61 #left{ 62 float:left; 63 position:relative; 64 65 } 66 #images{ 67 margin-left:10px; 68 float:left; 69 position:relative; 70 71 } 72 #largeImg{ 73 /*margin-left: 10px;*/ 74 margin-top:10px; 75 } 76 #smallImg{ 77 margin-top:10px; 78 /*margin-left: 10px;*/ 79 80 } 81 #welcom{ 82 width:190px; 83 height:480px; 84 background-color:#00f; 85 margin-top:10px; 86 margin-left:10px; 87 float:left; 88 position:relative; 89 90 } 91 #main{ 92 position:relative; 93 /*position: absolute;*/ 94 left:50%; 95 margin-left:-595px; 96 97 } 98 .right{ 99 position:absolute; 100 top:10px; 101 width:800px; 102 height:480px; 103 margin-left:180px; 104 margin-top:0px; 105 border:1px solid #000; 106 z-index:3; 107 color:#000; 108 background-color:#eee; 109 display:none; 110 } 111 </style> 112 </head> 113 <body> 114 <!--广告 --> 115 <div id="head"><img src="head.jpg"></div> 116 <!--main把三个div合到一起 --> 117 <div id="main"> 118 <!--上侧导航 --> 119 <div id="nav"> 120 <ul> 121 <li>秒杀</li> 122 <li>优惠券</li> 123 <li>闪购</li> 124 <li>拍卖</li> 125 </ul> 126 </div> 127 <div class="clear"></div> 128 <!--左侧导航 --> 129 <div id="left"> 130 <ul> 131 <li><span>家用电器</span> 132 <div class="right"> 133 <div>电视/空调/洗衣机</div> 134 <div>电视/空调/洗衣机</div> 135 <div>电视/空调/洗衣机</div> 136 <div>电视/空调/洗衣机</div> 137 <div>电视/空调/洗衣机</div> 138 <div>电视/空调/洗衣机</div> 139 </div> 140 </li> 141 <li><span>手机/数码</span> 142 <div class="right"> 143 <div>手机/对讲机/数码相机</div> 144 </div> 145 </li> 146 <li><span>男装/女装</span> 147 <div class="right"> 148 <div>羽绒服/棉服/羊毛衫</div> 149 </div> 150 </li> 151 <li><span>电脑/办公</span> 152 <div class="right"> 153 <div>笔记本/平板/显示器</div> 154 </div> 155 </li> 156 </ul> 157 </div> 158 <!--右侧广告 --> 159 <div id="images"> 160 <div id="largeImg"> 161 <img src="1.jpg"alt=""> 162 </div> 163 <!--<div class="clear"></div> --> 164 <div id="smallImg"> 165 <img src="4.jpg"alt=""> 166 <img src="5.jpg"alt=""> 167 </div> 168 </div> 169 <!--最右侧充话费 --> 170 <div id="welcom"> 171 <div>注册</div> 172 <div>登录</div> 173 </div> 174 </div> 175 176 </body> 177 <script> 178 $('#nav li').hover( 179 function(){ 180 $(this).css({"color":"#f00"}); 181 }, 182 function(){ 183 $(this).css({"color":"#000"}); 184 } 185 ); 186 $('#left li').hover( 187 function(){ 188 $(this).css({"background-color":"#ddd"}); 189 $(this).children('.right').show(); 190 191 }, 192 function(){ 193 $(this).css({"background-color":"#888"}); 194 $(this).children('.right').hide(); 195 196 } 197 ); 198 $('#left span').hover( 199 function(){ 200 $(this).css({"color":"#f00"}); 201 202 }, 203 function(){ 204 $(this).css({"color":"#fff"}); 205 206 } 207 ); 208 209 </script> 210 </html>