title: hover event only fire one element which you can see it on the snippet
body: <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>(function() {
    var _li = document.querySelectorAll('.filterList .filterItem');
  
    for (var i = 0; i &lt; _li.length; i++) {
      var _nestedUl = _li[i].getElementsByClassName('nestedUl')[0];
      var _aLink = _li[i].getElementsByClassName('downIcon')[0];
  
      //alert(i + ':' + _li[i].className);
  
      function showNested(e) {
        e.preventDefault();
        _nestedUl.style.display = 'block';
      }
  
      function hideNested(e) {
        e.preventDefault();
        _nestedUl.style.display = 'none';
      }
  
      _aLink.addEventListener('mouseover', showNested, false);
      _aLink.addEventListener('mouseout', hideNested, false);
  
    }
  
  }());</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>ul.nestedUl {
    display: none;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;ul class="filterList"&gt;
    &lt;li class="filterItem"&gt;
      &lt;a href="" class="downIcon"&gt;
        课程 &lt;i class="fa fa-chevron-down"&gt;&lt;/i&gt;
      &lt;/a&gt;
      &lt;ul class="nestedUl"&gt;
        &lt;li&gt;
          &lt;a href="" class="selected"&gt;
            &lt;i class="fa fa-check"&gt;&lt;/i&gt; &amp;nbsp HTML5 course
          &lt;/a&gt;
        &lt;/li&gt;
        &lt;li&gt;
          &lt;a href=""&gt;
            &lt;i class="fa fa-check"&gt;&lt;/i&gt; &amp;nbsp HTML5 course
          &lt;/a&gt;
        &lt;/li&gt;
  
        &lt;li&gt;
          &lt;a href=""&gt;
            &lt;i class="fa fa-check"&gt;&lt;/i&gt; &amp;nbsp HTML5
          &lt;/a&gt;
        &lt;/li&gt;
      &lt;/ul&gt;
    &lt;/li&gt;
  
    &lt;li class="filterItem"&gt;
      &lt;a href="" class="downIcon"&gt;
        主题 &lt;i class="fa fa-chevron-down"&gt;&lt;/i&gt;
      &lt;/a&gt;
      &lt;ul class="nestedUl"&gt;
        &lt;li&gt;
          &lt;a href="" class="selected"&gt;
            &lt;i class="fa fa-check"&gt;&lt;/i&gt; &amp;nbsp HTML5 subject
          &lt;/a&gt;
        &lt;/li&gt;
        &lt;li&gt;
          &lt;a href=""&gt;
            &lt;i class="fa fa-check"&gt;&lt;/i&gt; &amp;nbsp HTML5 subject
          &lt;/a&gt;
        &lt;/li&gt;
  
        &lt;li&gt;
          &lt;a href=""&gt;
            &lt;i class="fa fa-check"&gt;&lt;/i&gt; &amp;nbsp HTML5
          &lt;/a&gt;
        &lt;/li&gt;
      &lt;/ul&gt;
    &lt;/li&gt;
  
    &lt;li class="filterItem"&gt;
      &lt;a href="" class="downIcon"&gt;
        排序 &lt;i class="fa fa-chevron-down"&gt;&lt;/i&gt;
      &lt;/a&gt;
      &lt;ul class="nestedUl"&gt;
        &lt;li&gt;
          &lt;a href="" class="selected"&gt;
            &lt;i class="fa fa-check"&gt;&lt;/i&gt; &amp;nbsp HTML5 order
          &lt;/a&gt;
        &lt;/li&gt;
        &lt;li&gt;
          &lt;a href=""&gt;
            &lt;i class="fa fa-check"&gt;&lt;/i&gt; &amp;nbsp HTML5 order
          &lt;/a&gt;
        &lt;/li&gt;
  
        &lt;li&gt;
          &lt;a href=""&gt;
            &lt;i class="fa fa-check"&gt;&lt;/i&gt; &amp;nbsp HTML5
          &lt;/a&gt;
        &lt;/li&gt;
      &lt;/ul&gt;
  
    &lt;/li&gt;
  
  
  &lt;/ul&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>what i wanna do is to show the ul element when mouse over it,that is ,to make a dropdown menu using pure javascript. 
  but all shows the middle element, i've no idea what's wrong with it. seems that the grammer is right, what am i missing? </p>
  
  <p>thanks</p>