Html Menu下拉菜單

    最近系統要在Mac上使用，Asp.Net的Menu菜單在Mac無法使用。沒辦法，在網上找一下Menu菜單。將測試成功的記錄一下。

樣式：

源碼如下：

<% @ Page Language = " C# "  AutoEventWireup = " true "  CodeFile = " Test02.aspx.cs "  Inherits = " Page_Test02 "   %>

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
< html  xmlns ="http://www.w3.org/1999/xhtml" >
< head  id ="Head1"  runat ="server" >
     < meta  http-equiv ="Content-Type"  content ="text/html; charset=utf-8"   />
     < title > JavaScript下拉菜单 </ title >
     < style  type ="text/css" >
        *  {
            padding : 0 ;
            margin : 0 ;
         }
        body  {
            font-family : verdana, sans-serif ;
            font-size : small ;
         }
        #navigation, #navigation li ul  {
            list-style-type : none ;
         }
        #navigation  {
            margin : 20px ;
         }
        #navigation li  {
            float : left ;
            text-align : center ;
            position : relative ;
         }
        #navigation li a:link, #navigation li a:visited  {
            display : block ;
            text-decoration : none ;
            color : #000 ;
            width : 120px ;
            height : 40px ;
            line-height : 40px ;
            border : 1px solid #fff ;
            border-width : 1px 1px 0 0 ;
            background : #c5dbf2 ;
            padding-left : 10px ;
         }
        #navigation li a:hover  {
            color : #fff ;
            background : #2687eb ;
         }
        #navigation li ul li a:hover  {
            color : #fff ;
            background : #6b839c ;
         }
        #navigation li ul  {
            display : none ;
            position : absolute ;
            top : 40px ;
            left : 0 ;
            margin-top : 1px ;
            width : 120px ;
         }
        #navigation li ul li ul  {
            display : none ;
            position : absolute ;
            top : 0px ;
            left : 130px ;
            margin-top : 0 ;
            margin-left : 1px ;
            width : 120px ;
         }
     </ style >
     < script  type ="text/javascript" >
         function  displaySubMenu(li) {
             var  subMenu  =  li.getElementsByTagName( " ul " )[ 0 ];
            subMenu.style.display  =   " block " ;
        }
         function  hideSubMenu(li) {
             var  subMenu  =  li.getElementsByTagName( " ul " )[ 0 ];
            subMenu.style.display  =   " none " ;
        }
     </ script >
</ head >
< body >
     < ul  id ="navigation" >
         < li  onmouseover ="displaySubMenu(this)"  onmouseout ="hideSubMenu(this)" >
             < a  href ="#" > 栏目1 </ a >    
             < ul >
                 < li >< a  href ="#" > 栏目1->菜单1 </ a ></ li >
                 < li >< a  href ="#" > 栏目1->菜单2 </ a ></ li >
                 < li >< a  href ="#" > 栏目1->菜单3 </ a ></ li >
                 < li >< a  href ="#" > 栏目1->菜单4 </ a ></ li >
             </ ul >
         </ li >
         < li  onmouseover ="displaySubMenu(this)"  onmouseout ="hideSubMenu(this)" >
             < a  href ="#" > 栏目2 </ a >    
             < ul >
                 < li >< a  href ="#" > 栏目2->菜单1 </ a ></ li >
                 < li >< a  href ="#" > 栏目2->菜单2 </ a ></ li >
                 < li >< a  href ="#" > 栏目2->菜单3 </ a ></ li >
                 < li >< a  href ="#" > 栏目2->菜单4 </ a ></ li >
                 < li >< a  href ="#" > 栏目2->菜单5 </ a ></ li >
             </ ul >
         </ li >
         < li  onmouseover ="displaySubMenu(this)"  onmouseout ="hideSubMenu(this)" >
             < a  href ="#" > 栏目3 </ a >    
             < ul >
                 < li  onmouseover ="displaySubMenu(this)"  onmouseout ="hideSubMenu(this)" >
                     < a  href ="#" > 栏目3->菜单1 </ a >
                     < ul >
                         < li >< a  href ="#" > 菜单1->子菜单1 </ a ></ li >
                         < li >< a  href ="#" > 菜单1->子菜单2 </ a ></ li >
                         < li >< a  href ="#" > 菜单1->子菜单3 </ a ></ li >
                         < li >< a  href ="#" > 菜单1->子菜单4 </ a ></ li >
                     </ ul >
                 </ li >
                 < li >< a  href ="#" > 栏目3->菜单2 </ a ></ li >
                 < li  onmouseover ="displaySubMenu(this)"  onmouseout ="hideSubMenu(this)" >
                     < a  href ="#" > 栏目3->菜单3 </ a >
                     < ul >
                         < li >< a  href ="#" > 菜单3->子菜单1 </ a ></ li >
                         < li >< a  href ="#" > 菜单3->子菜单2 </ a ></ li >
                         < li >< a  href ="#" > 菜单3->子菜单3 </ a ></ li >
                     </ ul >
                 </ li >
             </ ul >
         </ li >
     </ ul >
</ body >
</ html >

代碼轉自：http://www.helloxudan.net/2008/04/09/javascript-drop-down-menu.html