Hover On

HTML

<ul class="internal-dropdown">
<li class="top-level"><a href="#809">Item 1</a>
    <ul class="sub_menu">
        <li><a href="#834">sub 1</a></li>
        <li><a href="#833">sub 2</a></li>
        <li><a href="#832">sub 3</a></li>
    </ul>
</li>
<li class="top-level"><a href="#810">Item 2</a>
    <ul class="sub_menu">
        <li><a href="#834">sub 1</a></li>
        <li><a href="#833">sub 2</a></li>
        <li><a href="#832">sub 3</a></li>
    </ul>
</li>
<li class="top-level"><a href="#811">Item 3</a>
    <ul class="sub_menu">
        <li><a href="#834">sub 1</a></li>
        <li><a href="#833">sub 2</a></li>
        <li><a href="#832">sub 3</a></li>
    </ul>    
</li>
</ul>

CSS

ul.internal-dropdown {
  border-bottom: 1px solid #138A52;
  border-top: 1px solid #138A52;
  margin: 0 0 10px;
}

ul.internal-dropdown a {
    font-size: 12px;
    font-weight: bold;
}
ul.internal-dropdown li {
  border-bottom: 1px solid #CEE8DD;
  padding: 8px 0;
  text-indent: 15px;
}
ul.internal-dropdown li:hover {
  background: none repeat scroll 0 0 #138A52;
  border: medium none;
}

a:hover {
    text-decoration: underline
    color: #f4ce2b;
}
ul.internal-dropdown li:hover a {
    color: #f4ce2b;
}
ul.internal-dropdown li.on {
    border: medium none;
    text-indent: 15px;
}
ul.internal-dropdown .sub_menu li {
    text-indent: 40px;
    border: medium none;
}
ul.internal-dropdown .sub_menu {
    display: none;
}
ul.internal-dropdown .on .sub_menu {
   display: block;
}
#nav-wrap ul ul {
    margin: 0;
}

.first {background:red;}

JavaScript

var $link = $('ul.internal-dropdown li.top-level');
$link.hover(function() {
    $(this).addClass('on');
    if( $(this).is('li.top-level:last-child') ) {
        $('li.top-level:first').addClass('first');
    }
    
}, function() {
    $link.removeClass('on');
    $('li.top-level:first').removeClass('first');
});