                        课程
                    
                        /前端开发
                        
                            /JavaScript
                        
                        /形形色色的下拉菜单

childNodes

 <script type="text/javascript">
        function ShowSub(li) {
            var subMenu =li.getElementsByTagName("ul")[0];
            subMenu.style.display = " block ";
        }

        function HideSub(li) {
            var subMenu = li.getElementsByTagName("ul")[0];
            subMenu.style.display = " none ";
        }

    </script>

能不能用var subMenu =li.childNodes[1]; 为什么？

<body>
<div id="nav">
<ul>
  <li><a href="#">首页</a></li>
  <li onmouseover="ShowSub(this);" onmouseout="HideSub(this);" >
      <a href="#">课程大厅</a>
     <ul>
         <li><a href="#">JavaScript</a></li>
         <li><a href="#">Html/CSS</a></li>
     </ul>  
  </li>
  <li onmouseover="ShowSub(this);" onmouseout="HideSub(this);" >
      <a href="#">学习中心</a>
      <ul>
         <li><a href="#">视频学习</a></li>
         <li><a href="#">实例练习</a></li>
         <li><a href="#">问与答</a></li>
     </ul>  
  
  </li>
  <li><a href="#">经典案例</a></li>
  <li><a href="#">关于我们</a></li>
</ul>
</div>
</body>