title: Bug in the circle menu
body: <p>menu itself: <a href="http://codepen.io/anon/pen/zxXvoG" rel="nofollow">http://codepen.io/anon/pen/zxXvoG</a></p>
  
  <pre><code>&lt;!-- language: lang-js --&gt;
  $(document).ready(function() {
      $('a').hover(function() {
          $("ul li").eq($(this).index()).trigger("mouseover");
      }, function() {
          $("ul li").eq($(this).index()).trigger("mouseout");
      });
      $('li').hover(function() {
          $('a').eq($(this).index()).css('background-color', '#333333');
          $(this).css('background-color', '#333333');
      }, function() {
          $('a').eq($(this).index()).css('background-color', '#666666');
          $(this).css('background-color', '#666666');
      });
  });
  $( "a" )
    .on( "mouseenter", function() {
      $( this ).css({
        "color": "#00CAF2"
      });
    })
    .on( "mouseleave", function() {
      var styles = {
        "color":""
      };
      $( this ).css( styles );
    });
  </code></pre>
  
  <p>The problem: when you hover a link, block selected normally, but when you move cursor from menu item title to its block, somewhy block "ssssssss8"(first block in 'ul' list) selects too. </p>