title: Drop Down menu -- onmouseout getting invoked on the child node when set in the parent node
body: <p>Trying to mimic the <code>browse catagories</code> in the following link <a href="https://dev.twitter.com/discussions" rel="nofollow">https://dev.twitter.com/discussions</a></p>
  
  <p><code>onmouseover</code>  -- the container expands to fit the new items within itself -- but,moving the mouse within the container(expanded conainer) will result in the <code>onmouseout</code> getting invoked -- even when the mouse is within the container itself -- silly mistake or not trying hard to find out where and how i might be going wrong</p>
  
  <p>Code -- </p>
  
  <pre><code>&lt;html&gt;
      &lt;style type="text/css"&gt;
      #container{
      overflow: hidden;
      height: auto;
      width: 350px;
      background-color: rgba(0,0,0,0.65);
      }
      .contents{
      height: 30px;
      width: 350px;
      background-color: yellow;
      float: left;
      }
      &lt;/style&gt;
      &lt;script type="text/javascript" &gt;
      var foo = new Array("bar","santa","claus")
      function fire(){
      var contents = document.getElementById("contents")
      if(contents.hasChildNodes())
      return
      for(i = 0 ; i &lt; foo.length ; i++){
          var tem=document.createElement("div");
          tem.setAttribute("id",'cont'+i);
          tem.setAttribute("class","contents");
          tem.appendChild(document.createTextNode(foo[i]))
          contents.appendChild(tem)
      }
      }
      function unfire(evt){
  
      if ((evt.target || evt.srcElement).id != "container") 
      return;
  
      var contents = document.getElementById("contents");
      while(contents.hasChildNodes())
      contents.removeChild(contents.firstChild)
      }
      &lt;/script&gt;
  
      &lt;div id="container" onmouseover="fire(event)" onmouseout="unfire(event)"&gt;
          Move your mouse here
          &lt;div id="contents" &gt;&lt;/div&gt;
      &lt;/div&gt;
      &lt;/html&gt;
  </code></pre>