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="X-UA-Compatible" content="IE=7" /> 6 <title>精简漂亮的导航浮动菜单显示特效演示 by js.alixixi.com</title> 7 <style> 8 ul,li{ margin:0px; padding:0px; list-style:none;} 9 .div_a{ width:300px; float:left;} 10 .div_a li{ width:300px; height:50px; border-bottom:1px solid #fff; cursor:pointer; background-color:#060; text-align:center; line-height:50px; font-size:18px; color:#fff;} 11 12 .div_a1{ width:300px; height:150px; position:relative; background-color:#F00; top:-50px; left:250px; display:none;} 13 .div_a li:hover .div_a1{ display:block;} 14 </style> 15 </head> 16 17 <body> 18 <div class="div_a"> 19 <ul> 20 <li>这是内容这是内容 21 <div class="div_a1">这是里面的内容这是里面的内容这是里面的内容</div> 22 </li> 23 <li>这是内容这是内容 24 <div class="div_a1">这是里面的内容这是里面的内容这是里面的内容</div> 25 </li> 26 <li>这是内容这是内容 27 <div class="div_a1">这是里面的内容这是里面的内容这是里面的内容</div> 28 </li> 29 <li>这是内容这是内容 30 <div class="div_a1">这是里面的内容这是里面的内容这是里面的内容</div> 31 </li> 32 <li>这是内容这是内容 33 <div class="div_a1">这是里面的内容这是里面的内容这是里面的内容</div> 34 </li> 35 <li>这是内容这是内容 36 <div class="div_a1">这是里面的内容这是里面的内容这是里面的内容</div> 37 </li> 38 </ul> 39 </div> 40 </body> 41 </html>