CodePen

HTML

            
              <a href="#" class="top-level">Top-Level</a>
<a href="#" class="sub-item">Sub-Item</a>
            
          
!

CSS

            
              a {
  text-size: 1em;
  line-height: 100px;
  text-align: center;
  display: block;
  width: 300px;
  height: 100px;
  background: gray;
  color: white;
  text-decoration: none;
}
a.hover {
  color: black;
  background: white;
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              $('a').hover(//When you hover in or out of an 'a'
  function() {//When hovering over do this
    $(this).addClass('hover');
  },
  function() {//When hover out do this
    if ( $('.sub-item').is(':hover') {//If still hovering do this?!?!? You're out already...
        return false;
    }
    $(this).removeClass('hover');
  }
);
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................