Must be a simple jquery error?
<p>Still have no luck with this jquery for a on click menu script. I studied the attr setting but we no luck in making it function. </p>

<p>Do I need to load the script in the body with onload?  </p>

<p>I have a simple script that works but you have to click the menu to open and close with no fancy slide :(</p>

<p><strong>--jquery--</strong></p>

<pre><code>$(function(){
    $(document).ready(function () {
        $('#top_menu_menub').click(function (e) {
            e.preventDefault();
            var $this = $(this);
            var ulId = $this.attr("#topmenu");
            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');
                    }
                });
            }
        });
    });
});
</code></pre>

<p><strong>--- css --</strong></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;
}

#topmenu {list-style-type:none; width:200px; padding:0; margin:0 auto; height: 24px;}
#topmenu ul {list-style-type:none; padding:0; margin:0; border: solid 1px #eee; border-radius: 5px; }
#topmenu li {float:left; margin:1px 1px 0 0;position:relative; z-index: 9999}
#topmenu li.sub {width: 200px; height: 16px; padding: 1px 0px 0px 0px;}
#topmenu li.sub:hover { color:#00CCFF; background-image: url(../images/apecbutton.jpg); background-repeat: no-repeat;background-position: 8px 0px; height: 24px;}
#topmenu 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;}
#topmenu li a:hover {background:#fff; color:#4FA4F9;}
#topmenu ul {position:absolute;left:-9800px;width:115px; }
#topmenu li.click {}
#topmenu li.click ul{left: 12px; top:22px; background: #fff; } 
</code></pre>

<p><strong>---html---</strong></p>

<pre><code>&lt;div id="top_menu_menub"&gt;
    &lt;ul id="topmenu"&gt;
        &lt;li class="sub"&gt;
            &lt;ul&gt;
                &lt;li&gt;&lt;a href=""&gt;11111111&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href=""&gt;22222222&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href=""&gt;33333333&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href=""&gt;44444444&lt;/a&gt;&lt;/li&gt;
            &lt;/ul&gt;
        &lt;/li&gt;
    &lt;/ul&gt;
&lt;/div&gt;
</code></pre>
