Aaron 
Captain Cursor 
Cassandra 
Chris 
Courtney 
Jeff 
Joanne 
Jean Pierre 
Klug 
Kristin 
Nadav 
Taylor 
Thau 
Tim 
Wendy

    下面我们为菜单项设定功能。首先要做的是选择moreMenu类，并将其隐藏。因为通常情况下，如果你不点击菜单项，它不会显示子菜单目录。所以，你应该加入下面的代码： 

 .moreMenu {position: absolute; 
     width: 100px; 
     border: 1px solid red; 
     background-color: red; 
     layer-background-color: red; 
     visibility: hidden; 
     top: 22px; 
}
现在这个DIV仍然在页面中，但浏览器不将它显示出来。 

    现在给菜单条加入脚本使其能响应鼠标的行为并执行相应的功能。我们利用visibility属性隐藏子菜单项目并在菜单项目被点击时显示子菜单。 

    处理visibility时，你会立刻遇到DOM不兼容的问题。Netscape的DOM更多地受其LAYER标签和属性的影响。所以即使在DOM中你将一个对象的visibility属性设置为hidden（隐藏），Netscape也会将其显示出来。如果你加入下面这条： 

if (daMenu.visibility == 'hidden')

你所得到的不是样式表语法的参数值，而是LAYERS语法的参数值。 

    所以如果你设置document.foo.visibility = 'visible', 则代码将会按照你预想的那样执行，对象foo在屏幕中可以被看到。如果你用alert(document.foo.visibility)检查参数值, 则返回的数值是show。解决办法是设置一些变量，用标准的条件并设定一个名为visible的变量用于Netscape中的'show'，在Internet Explorer中则设置'visible'。在Netscape中设置一个名为'hide' 的变量，在InternetExplorer'则用hidden'。在相应的字符串位置放入这些变量，则问题就解决了。 

 <script>
if (document.layers) {
  visible = 'show';
  hidden = 'hide';
} else if (document.all) {
  visible = 'visible';
  hidden = 'hidden';
}

function barTog(menu) {
  if (document.layers) {
    daMenu = document.layers[menu];
  } else if (document.all) {
    daMenu = document.all(menu).style;
  }
  if (daMenu.visibility == visible) {
    daMenu.visibility = hidden;
  } else {
    daMenu.visibility = visible;
  }
  lastMenu = daMenu;
}
</script>
    barTog函数所做 的是设置标准的条件语句，如果在被传送的变量菜单中设定的对象是visible，则隐藏该对象，否则就显示该对象。然后将对该对象的引用传递给名为lastMenu的全局变量（这样以来，以后你可以再关闭它）。 接下来你要做的就是调用这个函数，所以在菜单条中你将"Webmonkey"设定一个anchor（锚区），并设定被点击是执行的行为。 

 <div id="webmonkey" class="daMenu">
  <a href="#" class="itemAnchor" 
onclick="javascript: barTog('moreMonkey'); return false;">
  Webmonkey
  </a>
</div>

这段代码执行barTog函数，并将应该被打开或关闭的DIV 的名称传递给它。 

    下面要做的是给每个菜单条设定一个行为。你可以设定任何一种行为，不一定非得是动态HTML。但由于本教程讲的是动态HTML，而我们的课题是将如何改变layers的visibility（可视性）属性 。所以我们为每一个菜单项目设定隐藏和显示包含相应的网猴图象的层（layer）。 

 <script>
function menuItem(item){
  if (document.layers) {
    daLast = document.layers[lastItem];
    daItem = document.layers[item];
  } else if (document.all) {
    daLast = document.all(lastItem).style;
    daItem = document.all(item).style;
  }
  daLast.visibility = hidden;
  daItem.visibility = visible;
  lastMenu.visibility = hidden;
  lastItem = item;
}