js实现下拉菜单

html部分

<li class="" onmouseover="show(this)" onmouseout="hide(this)" >
<a href="{:U('Home/Group/groupshowlist')}">课程和班级</a>
   <ul class="dropdown-menu" role="menu">
      <li><a href="__ROOT__/open/course/explore">公开课</a></li>
      <li><a href="__ROOT__/course/explore/fuction">课程功能</a></li>
      <li><a href="__ROOT__/course/explore/administrator">系统管理</a></li>
      <li><a href="__ROOT__/course/explore/app">官方应用</a></li>
      <li><a href="__ROOT__/classroom/explore" target="_blank">班级中心</a></li>
   </ul>
</li>

js部分

<script>
    function show(li){
        var ul= li.getElementsByTagName("ul")[0];
        // 关建二：在li这个对象内查询标签名为ul的标签，由于二级标签只有一个，所以索引为0即可。
        ul.style.display="block";
        // 关键三：当鼠标划过li时，其子元素ul标签的display为block
    }
    function hide(li){
        var ul= li.getElementsByTagName("ul")[0];
        ul.style.display="none";
    // 关键四：当鼠标划出li时，其子元素ul的display为none
    }
</script>