Question

I’m working on a jQuery menu.

Here’s the fiddle : http://jsfiddle.net/HZxjb/

What I need, is to be able to browse in each sub-categories. Right now, when the mouse is over “home”, well when I want to go over “Text 1”, the sub-categories slides back in. How can I stop that?

Also, I would like the sub categories to slide in next to the main categorie. So if my mouse is over “Home”, the sub-li will slide next to it. If my mouse is over “Services”, the sub-li will slide next to it, so there will be no sub-buttons next to “Home”, since “Services” is under it.

Also, if I go from one button to another quickly, you see the sub-buttons appearing under the ones that are on their way back in. How to make this work a way that this won’t happen?

Answer 1

http://jsfiddle.net/HZxjb/13/

You don’t need to call each one with an id.
What I gave you is how you should build your menu.

What I would recommend:

Don’t start building complicated things, without knowing the basics.

For example, the next code, is just wrong, no matter how you will look at it:

$(document).ready(function () {
    $(".sub_button_home").hide();
});
$(document).ready(function () {
    $(".sub_button_services").hide();
});
$(document).ready(function () {
    $(".sub_button_products").hide();
});

Not only that you can do that from the CSS (with display: none), you attached 3 functions, instead of one which will include all your code.

I suggest reading jQuery’s API to learn the basic structure you should adopt.