マウスが出てきても動かないのはなぜですか？

Question

JavaScriptコード：

<script type="text/javascript"> 
      window.onload=function(){ 
      var Div1 = document.getElementsByClassName("title"); 
      var Div2 = document.getElementsByClassName("sub-menu"); 
      var timer=null; 
      Div1.onmouseover = function(){ 
       clearTimeout(timer); 
       Div2.style.display='block'; 

      }; 
      Div1.onmouseout=function(){ 
       timer=setTimeout(function(){ 
        Div2.style.display='none'; 
       },300); 

      }; 

      Div2.onmouseover =function(){ 
       clearTimeout(timer); 
      }; 

      Div2.onmouseout=function(){ 
       timer=setTimeout(function(){ 

         Div2.style.display='none'; 
        },300); 


      }; 
     } 

    </script> 

htmlコード：

<div id="nav"> 
    <div class="left"></div> 
    <div class="right"></div> 
    <ul> 
    <li><a href="/" class="current">Home</a></li> 
    <li class="title"><a href="/cpanel.html" class="">cPanel</a> 
     <div class="sub-menu"> 
     <div style="float:left"> 
      <h2>test</h2> 
      <ul> 
      <li> 
       <a href="#">test</a> 
      </li> 
      <li> 
       <a href="#">test</a> 
      </li> 
      </ul> 
     </div> 
    <div style="float:left"> 
      <h2>service</h2> 
      <ul> 
      <li> 
       <a href="#">hello</a> 
      </li> 
      <li> 
       <a href="#">hello</a> 
      </li> 
      </ul> 
     </div> 
</div> 
    </li> 





    <li class="title"><a href="/price.html" class="">Price</a> 
    <div class="sub-menu"> 
     <ul> 
      <li> 
       <a href="#">hello</a> 
      </li> 
      <li> 
       <a href="#">world</a> 
      </li> 
      </ul> 
     </div> 




    </li> 

    </ul> 
</div> 

はCSS：

#nav ul li{ 
    float: left; 
    margin-right:50px; 
    list-style: none; 
    border-bottom: 1px solid red; 
    position: relative; 
    border: 1px solid red; 
     } 
#nav ul li .sub-menu{ 
    display: none; 
    font-weight: normal; 
    margin-top: 1px; 
    padding: 0 10px 10px; 
    position: absolute; 
    text-align: left; 
    width:auto; 
    left: 10px; 
    top:30px; 
    border:1px solid #CCCCCC; 
    width: 300px; 
    } 

jsのコードは、私は、それはdoesnのテキストcpanel上にマウスを置くwork.whenていませんその下にある対応するコンテンツを表示しないでください。何が間違っているのかわからないので、それを修正する方法はありません。前もって感謝します。

Answer 1

getElementsByClassName()は、HTMLCollectionを返します。配列として扱うことで、このコレクションの最初の要素を選択する必要があります：

var Div1 = document.getElementsByClassName("title")[0]; 
var Div2 = document.getElementsByClassName("sub-menu")[0];