老裴帮助关于javascript+css列表菜单的小练习

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>列表菜单</title>
 
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <style type="text/css">
  div.menuBorder{
  margin:0px;
  padding:0px;
  border:2px solid red;
  width:400px;
  height:250px;
  font-size:13px;
  }
  #menuBorder ul{
  margin:0px;
  padding:0px;
  list-style:none;
  text-align:center;
  }
  
  #menuBorder a{
  text-decoration:none;
  }
  #menuBorder a:hover{
  color:#FF6633;
  text-decoration:underline;
  }
  li.menu{
  clear:none;
  float:left; 
  margin:3px;
  padding:3px;
  height:auto;
  width:80px;
  border:1px solid green;
  background-color:lightgray;
  }
  li.menu:hover{
  cursor:pointer;
  }
  .menu ul{
  padding-top:3px;
  border-top:2px solid green;
  text-align:center;
  background-color:lightgreen;
  }
  .menu ul li{
  padding-top:2px;
  }
  .menu ul li:hover{
  background-color:#C8C8C8 ;
  }
  
  ul.menu{
  clear:none;
  float:right;
  }
  </style>
 </head>
  <script type="text/javascript">
  /**
  展示下拉菜单
  */
  function displayListMenu(_ulId){
  var objUL = document.getElementById(_ulId);
  var flag = objUL.style.display =="none";
  if(flag){
   objUL.style.display ="block";
  }else{
   objUL.style.display ="none";
  }
  }
  /**
  当鼠标移开时,隐藏列表菜单
  */
  function hideListMenu(_ulId){
   var objUL = document.getElementById(_ulId);
   var flag = objUL.style.display =="block";
  if(flag){
   objUL.style.display ="none";
  }
  }
 
  /**
  叶子节点信息
  */
  function nodeInfo(_id,_name){
   alert("节点ID:"+_id+"~节点名称:"+_name);
  }
  </script>
  <body>
  <div id="menuBorder" class="menuBorder">
   <ul id="menuTab">
   <li class="menu"><span onclick="displayListMenu('menu_1')" >菜单1</span>
    <ul id="menu_1" style="display:none" onmouseout="displayListMenu('menu_1')">
    <li><a href="javascript:nodeInfo('menu_1_1','菜单1.1')">菜单1.1</a></li>
    <li><a href="javascript:nodeInfo('menu_1_2','菜单1.2')">菜单1.2</a></li>
    <li><a href="javascript:nodeInfo('menu_1_3','菜单1.3')">菜单1.3</a></li>
    </ul>
 </li>
   <li class="menu" ><span onclick="displayListMenu('menu_2')" >菜单2</span>
    <ul id="menu_2" style="display:none" onmouseout="displayListMenu('menu_2')" >
    <li><a href="javascript:nodeInfo('menu_2_1','菜单2.1')">菜单2.1</a></li>
    <li><a href="javascript:nodeInfo('menu_2_2','菜单2.2')">菜单2.2</a></li>
    <li><a href="javascript:nodeInfo('menu_2_3','菜单2.3')">菜单2.3</a></li>
    <li><a href="javascript:nodeInfo('menu_2_4','菜单2.4')">菜单2.4</a></li>
    </ul>
    </li>
   <li class="menu" ><span onclick="displayListMenu('menu_3')">菜单3</span>
    <ul id="menu_3" style="display:none" onmouseout="displayListMenu('menu_3')" >
    <li><a href="javascript:nodeInfo('menu_3_1','菜单3.1')">菜单3.1</a></li>
    <li><a href="javascript:nodeInfo('menu_3_2','菜单3.2')">菜单3.2</a></li>
    <li><a href="javascript:nodeInfo('menu_3_3','菜单3.3')">菜单3.3</a></li>
    <li><a href="javascript:nodeInfo('menu_3_4','菜单3.4')">菜单3.4</a></li>
    </ul>
   
   </li>
   </ul>
  </div>
  </body>
</html>

你可能感兴趣的:(JavaScript,html,css)