css menu with jquery
<p>Cant get this script to work with my menu really have tried everything any ideas? The divs has a background image which is on hover then jquery does the on click release li menu... is the hover function messing it up?</p>

<pre><code>&lt;div class="top_menu"&gt;
    &lt;div class="top_menu_menub"&gt;
        &lt;ul id="menu"&gt;
            &lt;li class="sub"&gt;
                &lt;ul&gt;
                    &lt;li&gt;&lt;a href=""&gt;Control Center&lt;/a&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;a href=""&gt;APEC Trinity&lt;/a&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;a href=""&gt;APEC Living&lt;/a&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;a href=""&gt;APEC Energy&lt;/a&gt;&lt;/li&gt;
                &lt;/ul&gt;
            &lt;/li&gt;
        &lt;/ul&gt;
    &lt;/div&gt;
&lt;/div&gt;​
</code></pre>

<p>jQuery:</p>

<pre><code>$(function() {
    $(document).ready(function() {
        $('li').click(function(e) {
            var $this = $(this);
            var ulId = $this.attr("href");
            var clicked_menu_is_visible = $this.parent().find("ul" + ulId).filter(':visible').length &gt; 0;
            var visible_uls = $this.parent().find("ul").filter(':visible');
            if (visible_uls.length === 0) { //no menus showing - just show clicked menu 
                $ul = $this.parent().find("ul" + ulId);
                $ul.slideToggle('medium');
            }
            else { //close open menus (should only be one open) then open clicked menu
                //via callback 
                $this.parent().find("ul").filter(':visible').slideUp("medium", function() {
                    $ul = $this.parent().find("ul" + ulId);
                    //open clicked menu - unless menu was already open when clicked
                    if (!clicked_menu_is_visible) {
                        $ul.slideToggle('medium');
                    }
                });
            }
            console.log($(this).children()[0].innerText);
            e.preventDefault();
            return false;
        });
    });
});​
</code></pre>

<p>CSS:</p>

<pre><code>.top_menu_menub {
    padding: 3px 0px 0px 0px;
    width: 200px;
    float: left;
    height: 20px;
    text-align: left;
    font-family: Helvetica, sans-serif;
    font-size: 10px;
    font-weight: bold;
    color: #aaa;
    background-image: url(../images/apecbuttona.jpg);
    background-repeat: no-repeat;
    background-position: 8px 4px;
    cursor: pointer;
}
#menu {
    list-style-type: none;
    width: 200px;
    padding: 0;
    margin: 0 auto;
    height: 24px;
}
#menu ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
    border: solid 1px#eee;
    border-radius: 5px;
}
#menu li {
    float: left;
    margin: 1px 1px 0 0;
    position: relative;
    z-index: 9999
}
#menu li.sub {
    width: 200px;
    height: 16px;
    padding: 1px 0px 0px 0px;
}
#menu li.sub:hover {
    color: #00CCFF;
    background-image: url(../images/apecbutton.jpg);
    background-repeat: no-repeat;
    background-position: 8px 0px;
    height: 24px;
}
#menu li a {
    display: block;
    color: #999;
    font-family:arial, sans-serif;
    font-size:11px;
    line-height:23px;
    width:107px;
    text-decoration:none;
    text-align:left;
    cursor:pointer;
    font-weight:100;
    border-bottom: 1px solid # eee;
    padding-left: 8px;
}
#menu li a:hover {
    background: #fff;
    color: #4FA4F9;
}
#menu ul {
    position: absolute;
    left: -9800px;
    width: 115px;
}
#menu li.click {
}
#menu li.click ul {
    left: 12px;
    top: 22px;
    background: #fff;
}
/* the background image is for IE7 */

​
</code></pre>
