creating a menu bar

[Asan23]

I am trying to create a menu bar off of my unordered list and i cant figure out why the js doesnt work. i got the fuction from w3c.
here is my js file

<style> 
#menu,#submenu
{
padding:5px;
text-align:center;
background-color:#e5eecc;
border:solid 1px #c3c3c3;
}
#menu
{
padding:50px;
display:none;
}
</style>


<script>
$(document).ready(function(){

  $("#menu").click(function(){
    $("#submenu").slideDown("slow");
  });
    $("#menu").hover(function(){
    $("#submenu").slideUp("slow");
    });
});
</script>

and this is my html file that i am trying to create the menu off of

<ul id="menu">
  <li>Change text</li>
  <li>Super Hero</li>
        <ul id="submenu"">
          <li>Color Theme</li>
        </ul>
    </ul>

i know you can use spry but the class im in the professor wants us to create one manually

[pritaeas]

Shouldn't you be using the click on the li instead? Do note that the hover will likely slide it up again. Can you show this online?

[AleMonteiro]

Your code doesn't make any sense. When the user click any part of the #menu (incluing itens and sub menu) it will open the submenu, and when the user hover the mouse (hover is an alias for mouse over and mouse out events) it will close.

I think that what you want is to open the submenu if the user clicks only the <li> or even only the <li> super hero. Is that right?

If so, try this:

<ul id="menu">
  <li>Change text</li>
  <li>
        <label>Super Hero</label>
        <ul id="submenu">
          <li>Color Theme</li>
        </ul>
    </li>
</ul>

I'm using <label> to hold the link because I only want to close the submenu if the user clicks the label, and not the submenu also.

$("#menu > li:has(ul) > label").click(function(){ // Add click handler to the #menu li's label that have an ul brother
        $(this).next("ul").slideToggle("slow"); // First click opens, second closes
    });

It will open the submenu only if Super Hero is clicked, and once it's clicked again it'll close.