why the mouse over and out doesn't work?
javascript code:

    <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 code:

    <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;
      }


the js code doesn't work.i don't know what's wrong with it how to correct it. thanks in advance.


i can't submit this question. so i add the following. expect someone do me a favor and delete it. thank you

Your post does not have much context to explain the code sections; please explain your scenario more clearly.Your post does not have much context to explain the code sections; please explain your scenario more clearly.


why the mouse over and out doesn't work?
===

javascript code:

    <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 code:

    <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;
      }


the js code doesn't work.i don't know what's wrong with it how to correct it. thanks in advance.


i can't submit this question. so i add the following. expect someone do me a favor and delete it. thank you

Your post does not have much context to explain the code sections; please explain your scenario more clearly.Your post does not have much context to explain the code sections; please explain your scenario more clearly.

