Javascript實作簡單二級下拉選單實例_javascript技巧

複製程式碼以下程式碼：

選單標題>

#nav
{
列表樣式：無；
文字對齊：居中；
}
#nav li
{
浮動：左；
寬度：100px;
顏色：白色；
背景顏色：#3E3E3E;
}
men#menu
{
列表樣式：無；
內邊距：5px;
顯示：無；
左邊距：-5px;
頂邊距：-5px；
}
#menu li
{
背景顏色：#ccc;
寬度：100px;
文字對齊：左；
左內邊距：10px；
}
#menu li a:link
{
文字裝飾：無；
顯示：塊；
}
#menu li a:hover
{
背景顏色:# 3E3E3E;
顏色：白色
}
樣式>
頭>

• 資料據庫
  
  
  
  • MySQL
  
  
  • SQL Server
  
  
  • Oracle
  
  
  • DB2
  
  
  
  


• 前台腳本
  
  
  
  • JavaScript
  
  
  • Ruby
  
  
  • HTML
  
  
  • Python
  
  
  
  


• 後台腳本
  
  
  
  • PHP
  
  
  • ASP
  
  
  • ASP .NET
  
  
  • JSP
  
  
  
  

var lis = document.getElementById("nav").getElementsByTagName('li');
var i = 0;

for( i = 0; i
lis.length; i )
{
if(lis[i].className == "child")
{
lis [i].onmouseover = function()
{
var ulObj1 = this.getElementsByTagName('ul')[0];
ulObj1.style.display = "區塊";
this.style.backgroundColor="#ccc";
this.style.color="黑色";
}
}

lis[i].onmouseout = function()
{
var ulObj1 = this.getElementsByTagName('ul')[0]; //這是HTMLElement物件
ulObj1.style.display = "none";
this.style .backgroundColor="#3E3E3E";
this.style.color="白色";
}
}


身體>