<div class="codetitle"> <span><a style="CURSOR: pointer" data="51696" class="copybut" id="copybut51696" onclick="doCopy('code51696')"><u>复制代码</u></a></span>代码如下:</div> <div class="codebody" id="code51696"> <br><span style="font-size:14px;"> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <BR><html xmlns="http://www.w3.org/1999/xhtml"> <br> <br><meta http-equiv="content-type" content="texthtml;charset=utf-8"> <br><title>メニュー</title> <br><style type="text/css"> <br>#nav <br>{ <br>リストスタイル: なし; <br>text-align: 中央; <br>} <br>#nav li <br>{ <br>float: left; <br>幅: 100ピクセル; <br>色: 白; <br>背景色: #3E3E3E; <br>} <br>#menu <br>{ <br>リストスタイル: なし; <br>パディング: 5px; <br>表示: なし。 <br>マージン左: -5px; <br>マージントップ: -5px; <br>} <br>#menu li <br>{ <br>背景色: #ccc; <br>幅: 100ピクセル; <br>テキスト整列: 左; <br>パディング左: 10px; <br>} <br>#menu li a:link <br>{ <br>テキスト装飾: なし; <br>表示: ブロック; <br>} <br>#menu li a:hover <br>{ <br>background-color:#3E3E3E; <br>カラー: ホワイト <br>} <br></style> <br></head> <br> <br><ul id="nav"> <br><li class="child">数据库 <br><ul id="menu"> <br><li><a href="http://blog.csdn.net/u011043843">MySQL</a></li> <br><li><a href="http://blog.csdn.net/u011043843">SQL Server</a></li> <br><li><a href="http://blog.csdn.net/u011043843">Oracle</a></li> <br><li><a href="http://blog.csdn.net/u011043843">DB2</a></li> <br> <br></li> <br><li class="child">前台脚本 <br><ul id="menu"> <br><li><a href="http://blog.csdn.net/u011043843">JavaScript</a></li> <br><li><a href="http://blog.csdn.net/u011043843">Ruby</a></li> <br><li><a href="http://blog.csdn.net/u011043843">HTML</a></li> <br><li><a href="http://blog.csdn.net/u011043843">Python</a></li> <br> <br></li> <br><li class="child">後台脚本 <br><ul id="menu"> <br><li><a href="http://blog.csdn.net/u011043843">PHP</a></li> <br><li><a href="http://blog.csdn.net/u011043843">ASP</a></li> <br><li><a href="http://blog.csdn.net/u011043843">ASP.NET</a></li> <br><li><a href="http://blog.csdn.net/u011043843">JSP</a></li> <br> <br></li> <br> <br><script type="text/javascript"> <br>var lis = document.getElementById("nav").getElementsByTagName('li'); <br>var i = 0; <br><br>for( i = 0; i < lis.length; i ) <BR>{ <BR>if(lis[i].className == "child") <BR>{ <BR>lis [i].onmouseover = function() <BR>{ <BR>var ulObj1 = this.getElementsByTagName('ul')[0]; <BR>ulObj1.style.display = "ブロック"; <BR>this.style.backgroundColor="#ccc"; <BR>this.style.color="黒"; <BR>} <BR>} <br><br>lis[i].onmouseout = function() <BR>{ <BR>var ulObj1 = this.getElementsByTagName('ul')[0]; //これは HTMLElement オブジェクト <BR>ulObj1.style.display = "none"; <BR>this.style.backgroundColor="#3E3E3E"; <BR>this.style.color="白"; <BR>} <BR>} <br><br></script> <br></body> <br></html></span> <br> </div>