-1

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.when i put the mouse over the text cpanel it doesn't show the corresponding content which under it.i don't know what's wrong with it how to correct it. thanks in advance.

run
  • 543
  • 4
  • 8
  • 20
  • Your timer var will be a local variable within the onload function, and will most likely NOT be available to the various timer calls you perform. – Marc B May 14 '12 at 01:57
  • possible duplicate of [getElementsByClassName not working](http://stackoverflow.com/questions/3349332/getelementsbyclassname-not-working) – James Black May 14 '12 at 02:01
  • There are many problems with your approach. I would suggest you don't try to take a short-cut, but see about just adding the event handlers, or, in your case, learn to use jquery to take care of this for you. – James Black May 14 '12 at 02:03
  • @MarcB the onmouseout and onmouseover functions create closures though, right? Works for me [here](http://jsfiddle.net/SSr9C/1/). – mgiuffrida May 14 '12 at 02:06
  • i am sorry , you can't click the link in the content.when you mouse over the li – run May 14 '12 at 02:10

1 Answers1

2

getElementsByClassName() returns an HTMLCollection. You need to select the first element of this collection, by treating it as an array:

var Div1 = document.getElementsByClassName("title")[0];
var Div2 = document.getElementsByClassName("sub-menu")[0];
mgiuffrida
  • 3,299
  • 1
  • 26
  • 27