add class to parent li if dropdown is visible

I have a pretty standard CSS based dropdown menu. The main list is "#mainNav" and the dropdown is simply "mainNav ul". "mainNav ul" initially has a display of none, and when you hover over it's parent li, its display is set to block. When the nested ul is visible, i want to add the class "hilite" (this is the same as the a:hover attribute). so the parent li is highlighted when the dropdown is visible.

Targeting the li when the nested ul is visible:

$(function(){
    if($('#mainNav ul').css({display: "block"})){
        $("#mainNav li:nth-child(3)").addClass("hilite");
    }
});

the html

<ul id="mainNav" class="clearfix">
        <li><a href="contact.php" target="_self">CONTACT</a></li>
        <li><a href="events.php" target="_self">EVENTS</a></li>
        <li><a href="current-line.php" target="_self">CURRENT LINE</a>开发者_Python百科
            <ul>
                <li><a href="#" target="_self">2009 Fall</a></li>
                <li><a href="#" target="_self">2009 Spring</a></li>
                <li><a href="#" target="_self">2008 Fall</a></li>
                <li><a href="#" target="_self">2008 Spring</a></li>
            </ul>
        </li>
        <li><a href="shop.php" target="_self">SHOP</a></li>
        <li><a href="press.php" target="_self">PRESS</a></li>
        <li><a href="bio.php" target="_self">BIO</a></li>
        <li><a href="index.php" target="_self">HOME</a></li>
    </ul>

---

try something along the lines of:

$("#mainNav ul li ul").hover(
  function(){ // Mouse Over
   $(this).parent().addClass("hilite");
  },
  function(){ // Mouse Out
    $(this).parent().removeClass("hilite");
  }
);