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>
浙公網安備 33010602011771號