add class to parent li if dropdown is visible
<p>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.</p>

<p>Targeting the <code>li</code> when the nested <code>ul</code> is visible:</p>

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

<p>the html</p>

<pre><code>&lt;ul id="mainNav" class="clearfix"&gt;
        &lt;li&gt;&lt;a href="contact.php" target="_self"&gt;CONTACT&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="events.php" target="_self"&gt;EVENTS&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="current-line.php" target="_self"&gt;CURRENT LINE&lt;/a&gt;
            &lt;ul&gt;
                &lt;li&gt;&lt;a href="#" target="_self"&gt;2009 Fall&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="#" target="_self"&gt;2009 Spring&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="#" target="_self"&gt;2008 Fall&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="#" target="_self"&gt;2008 Spring&lt;/a&gt;&lt;/li&gt;
            &lt;/ul&gt;
        &lt;/li&gt;
        &lt;li&gt;&lt;a href="shop.php" target="_self"&gt;SHOP&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="press.php" target="_self"&gt;PRESS&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="bio.php" target="_self"&gt;BIO&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="index.php" target="_self"&gt;HOME&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
</code></pre>
