title: Dynamic <ul> and <li> on hover in <ul> show <li>
body: <p>I have 3 <code>&lt;ul&gt;</code> and each <code>&lt;ul&gt;</code> element have 1 hidden <code>&lt;li style="display:none;"&gt;</code> hover on 1 <code>&lt;ul&gt;</code> i want to show only <code>&lt;li&gt;</code> of which that <code>&lt;ul&gt;</code> is hover<br></p>
  
  <p>Problem is that when i hover on 1 <code>&lt;ul&gt;</code> element it will hover on all 3 <code>&lt;ul&gt;</code> element and display all <code>&lt;li&gt;</code> element.</p>
  
  <p>Below is my code</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  &lt;script&gt;
  function chh()
  {
      for (var i = 0; i &lt; document.getElementsByTagName("ul").length; i++)
      {
          document.getElementsByTagName("ul")[i].onmouseover = function()
          {
              for (var i = 0; i &lt; document.getElementsByTagName("li").length; i++)
              {
                  document.getElementsByTagName("li")[i].style.display = "block";
              }
          }
      }
  }
  &lt;/script&gt;
  &lt;/head&gt;
  &lt;body onLoad="chh();"&gt;
  &lt;ul&gt;
  Friend Request Sent
  &lt;li style="display:none;"&gt;Cancel Request&lt;/li&gt;
  &lt;/ul&gt;
  &lt;ul&gt;
  Friend Request Sent
  &lt;li style="display:none;"&gt;Cancel Request&lt;/li&gt;
  &lt;/ul&gt;
  &lt;ul&gt;
  Friend Request Sent
  &lt;li style="display:none;"&gt;Cancel Request&lt;/li&gt;
  &lt;/ul&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Demo :<a href="http://jsfiddle.net/vZeP4/" rel="nofollow">http://jsfiddle.net/vZeP4/</a></p>