Question

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?

<div class="top_menu">
    <div class="top_menu_menub">
        <ul id="menu">
            <li class="sub">
                <ul>
                    <li><a href="">Control Center</a></li>
                    <li><a href="">APEC Trinity</a></li>
                    <li><a href="">APEC Living</a></li>
                    <li><a href="">APEC Energy</a></li>
                </ul>
            </li>
        </ul>
    </div>
</div>​

jQuery:

$(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 > 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;
        });
    });
});​

CSS:

.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 */

​

Answer 1

Your click handler is capturing the click event for <li class="sub">. I don’t know if that’s what you want, but it has the side-effect of ensuring $this.attr("href") consistently returning undefined as the li element lacks that attribute.

This leads to the problem of var ulId being undefined, which in turn leads to the problem of $ul always being an empty jQuery object, so nothing else happens.

Also, your CSS leads to everything being initially not visible or parked 9800px offscreen to the left. Did you mean for something to be visible initially so the user knows where to click or to hover?

Please clarify in your question the behavior you are expecting.

UPDATE:

Per the clarification, below is your jQuery code modified to do what you want:

$(function() {
    var toggleMenu = function(e) {
        var $this = $(this),
            ulId = $this.attr("href") || $this.find('a').attr("href"),
            $ul = $this.parents("ul").filter("ul#" + ulId), //cache query
            $all = $("ul#menu ul"), //cache query
            clicked_menu_is_visible = $ul.is(':visible'), //changed .filter to .is
            visible_uls = $all.is(':visible'); //changed .filter to .is
        if (!visible_uls) { //no menus showing - just show clicked menu 
            $ul.slideToggle('medium');
        }
        else { //close open menus (should only be one open) then open clicked menu via callback
            $all.filter(':visible').slideUp("medium", function() {
                //open clicked menu - unless menu was already open when clicked
                if (!clicked_menu_is_visible) {
                    $ul.slideToggle('medium');
                }
            });
        }
        console.log('hideMenu triggered');
        e.preventDefault();
        return false;
    };
    $(document).ready(function() {
        $('div.top_menu_menub').click(function(e) {
            $('ul#menu ul').show('medium');
            console.log('div clicked');
            e.preventDefault();
            return false;
        });
        $('li.sub li, ul#menu a').click(toggleMenu);
        $('ul#menu ul').mouseleave(toggleMenu);
    });
});​

This works with your HTML structure and CSS. Working fiddle here.

As a side note, I would write it instead as the following:

$(function() {
    var toggleMenu = function(e) {
        var self = $(this),
            elemType = self[0].tagName.toLowerCase(),
            //get caller
            menu = null;
        if (elemType === 'a') {
            //anchor clicked, nav back to containing ul
            menu = self.parents('ul').not('ul#menu');
        } else if (elemType === 'ul') {
            //mouseleft ul, ergo menu is this.
            menu = self;
        }
        if (menu) {
            menu.hide('medium');
        }
        e.preventDefault();
        return false;
    };
    $(document).ready(function() {
        $('div.top_menu_menub').click(function(e) {
            $('ul#menu ul').show('medium');
            console.log('div clicked');
            e.preventDefault();
            return false;
        });
        $('ul#menu a').click(toggleMenu);
        $('ul#menu ul').mouseleave(toggleMenu);
    });
});​

This also works with your HTML structure. Working fiddle here.