jQuery - remove class from element when :hover

Question

I have a nested list.
The nav-ul is hidden unless you are on that page, in which case jQ adds the class selected.
I have written a jQuery script to handle the highlighting of the current location but what I am having trouble with is hiding the nav-ul when you hover over a top level li.

Item 1 | Item 2 | Item 3 |
Item 1.1 | Item 1.2 | Item 1.3 |

<ul id="nav">
  <li><a href="one.html">Item 1</a>
    <ul class="nav-ul selected">
      <li>Item 1.1</li>
      <li>Item 1.2</li>
      <li>Item 1.3</li>
    </ul>
  </li>
  <li><a href="two.html">Item 2</a>
    <ul class="nav-ul">
      <li>Item 2.1</li>
      <li>Item 2.2</li>
      <li>Item 2.3</li>
    </ul>
  </li>
  <li><a href="three.html">Item 3</a>
    <ul class="nav-ul">
      <li>Item 3.1</li>
      <li>Item 3.2</li>
      <li>Item 3.3</li>
    </ul>
  </li>
</ul>

Hope that makes sense...

Please forgive my code, this is my first attempt at jQuery.

$(function(){
    var pathFileName = (location.pathname);             // Gets the path and filename from the URL. Includes the leading slash
                                                        // eg:/water/index.shtml
//  $('#alert').append(pathFileName + '<br />');
    var splitPath    = location.pathname.split("/");    // split pathFileName at the '/' into an array 
    var i            = pathFileName.length-1;
/* add index.shtml if pathFileName ends in slash */
    if (pathFileName.substr(i) == '/'){
        pathFileName = pathFileName + 'index.shtml';
    }

    var mainSelector = "#horizontalNavigation";         // The id of the first level ul
    var subSelector  = ".nav-ul";                       // The class of the second level ul
    if ( pathFileName ) {
        if (splitPath.length >= 1){
            var pathOnly = "";
            for (var i=0; i < splitPath.length-1; i++){ // Rebuild the path from the array without the filename
                pathOnly += splitPath[i];               // eg:/water/
                pathOnly += "/";
            }
            var fullPath = (pathOnly + 'index.shtml');  // Add index.shtml the path 

/* Fix for the Design Rainfalls bug*/
            if (splitPath[2] == 'designRainfalls'){     
            var pathOnly = "";
                for (var i=0; i < 3; i++){
                    pathOnly += splitPath[i];
                    pathOnly += "/";
                }
            var fullPath = (pathOnly + 'index.shtml');  // Make the path /water/designRainfalls/index.shtml
            }
            if (fullPath != pathFileName){
/* Highlights the currently selected first level tab */
                $(mainSelector + ' a[@href^="' + pathOnly + '"]').parents('li').children('a').addClass('current');
/* Shows the second level nav */
                $(mainSelector + ' a[@href^="' + fullPath + '"]').parents('li').addClass('current');
            }
        }
/* Highlights the currently selected first level tab */
        $(mainSelector + ' a[@href="' + pathFileName + '"]').parents('li').children('a').addClass('current');
/* Shows the second level nav */
        $(mainSelector + ' a[@href="' + pathFileName + '"]').parents('li').addClass('current');
        $('.current > ul').addClass('selected');

/* Bold selected second level item */
        $('li > ul > li.current').css({fontWeight:"bold", background:"url(/water/images/l2-arrow.gif) center bottom no-repeat"});
/* Bold selected third level item */
        $('#tocBody a[@href$="' + pathFileName + '"]').parents('li').addClass('tocSelected');
    }
$('.nav-ul.selected').addClass('test');
});

Answer 1

Something along the lines of:

var navLi = $("#nav > li");
navLi.hover(
    function(e) {
        navLi.children("ul").removeClass("selected");
        $(e.currentTarget).children("ul").addClass("selected");
    }
);

?