突然想起來，IE6沒試。我就回來開始調(diào)，也沒調(diào)好，網(wǎng)上也有很多，但是一直也沒找個合適的。最后還是google出來了一個外國的網(wǎng)頁，一看這個不錯。確實很好。我在網(wǎng)上也搜了不少例子，可是一改就亂，就是這個原因換了好些也沒見個合適的。記著，用時查看。。。。。
就這了。有空時，把css給注釋下。方便改寫。
對了，老外的博客地址：http://javascript-array.com/scripts/simple_drop_down_menu/
HTML:
01 <ul id="sddm">
02 <!--如果欄目下沒有子菜單就不用onmouseover="mopen('m1')" onmouseout="mclosetime()"以及下面的那個DIV -->
03 <li><a href="#" onmouseover="mopen('m1')" onmouseout="mclosetime()">Home</a>
04 <div id="m1" onmouseover="mcancelclosetime()" onmouseout="mclosetime()">
05 <a href="#">HTML DropDown</a> <a href="#">DHTML DropDown menu</a> <a href="#">JavaScript
06 DropDown</a> <a href="#">DropDown Menu</a> <a href="#">CSS DropDown</a>
07 </div>
08 </li>
09 <li><a href="#" onmouseover="mopen('m2')" onmouseout="mclosetime()">Download</a>
10 <div id="m2" onmouseover="mcancelclosetime()" onmouseout="mclosetime()">
11 <a href="#">ASP Dropdown</a> <a href="#">Pulldown menu</a> <a href="#">AJAX dropdown</a>
12 <a href="#">DIV dropdown</a>
13 </div>
14 </li>
15 <li><a href="#" onmouseover="mopen('m3')" onmouseout="mclosetime()">Order</a>
16 <div id="m3" onmouseover="mcancelclosetime()" onmouseout="mclosetime()">
17 <a href="#">Visa Credit Card</a> <a href="#">Paypal</a>
18 </div>
19 </li>
20 <li><a href="#" onmouseover="mopen('m4')" onmouseout="mclosetime()">Help</a>
21 <div id="m4" onmouseover="mcancelclosetime()" onmouseout="mclosetime()">
22 <a href="#">Download Help File</a> <a href="#">Read online</a>
23 </div>
24 </li>
25 <li><a href="#" onmouseover="mopen('m5')" onmouseout="mclosetime()">Contact</a>
26 <div id="m5" onmouseover="mcancelclosetime()" onmouseout="mclosetime()">
27 <a href="#">E-mail</a> <a href="#">Submit Request Form</a> <a href="#">Call Center</a>
28 </div>
29 </li>
30 </ul>
31 <div style="clear: both">
32 </div>
33 <div style="clear: both">
34 aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
35 </div>
JS:(主要就是這個把不變的東西用js來固定住，其余的都可以自定義)
01 <script type="text/javascript">
02 <!--
03 var timeout = 500;
04 var closetimer = 0;
05 var ddmenuitem = 0;
06
07 // open hidden layer
08 function mopen(id)
09 {
10 // cancel close timer
11 mcancelclosetime();
12
13 // close old layer
14 if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';
15
16 // get new layer and show it
17 ddmenuitem = document.getElementById(id);
18 ddmenuitem.style.visibility = 'visible';
19
20 }
21 // close showed layer
22 function mclose()
23 {
24 if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';
25 }
26
27 // go close timer
28 function mclosetime()
29 {
30 closetimer = window.setTimeout(mclose, timeout);
31 }
32
33 // cancel close timer
34 function mcancelclosetime()
35 {
36 if(closetimer)
37 {
38 window.clearTimeout(closetimer);
39 closetimer = null;
40 }
41 }
42
43 // close layer when click-out
44 document.onclick = mclose;
45 // -->
46 </script>
CSS:
01 <script type="text/javascript">
02 <!--
03 var timeout = 500;
04 var closetimer = 0;
05 var ddmenuitem = 0;
06
07 // open hidden layer
08 function mopen(id)
09 {
10 // cancel close timer
11 mcancelclosetime();
12
13 // close old layer
14 if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';
15
16 // get new layer and show it
17 ddmenuitem = document.getElementById(id);
18 ddmenuitem.style.visibility = 'visible';
19
20 }
21 // close showed layer
22 function mclose()
23 {
24 if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';
25 }
26
27 // go close timer
28 function mclosetime()
29 {
30 closetimer = window.setTimeout(mclose, timeout);
31 }
32
33 // cancel close timer
34 function mcancelclosetime()
35 {
36 if(closetimer)
37 {
38 window.clearTimeout(closetimer);
39 closetimer = null;
40 }
41 }
42
43 // close layer when click-out
44 document.onclick = mclose;
45 // -->
46 </script>
喜歡 
頂
難過
囧
圍觀
無聊
