Why won't my slide toggle work?

Question

I have a nab bar and I want one of the items in the nav bar to open up a drop down menu when clicked. I have this:

$("#dropdown_menuitem").click(function() {
    $(this).find('ul').slideToggle('slow');
});

However the drop down menu never appears on click, my html looks like this:

<li id="dropdown_menuitem"><a href="#">MyAxon<img style="padding-left:5px;" src="img/drop-down.png"/></a>
    <ul class="dropdown reverse_gradient">
         <li class="dropdown"><a href="#">Teachers</a></li>
         <li class="lastElementInDropDown dropdown"><a href="#">Students</a></li>
    </ul>
</li>
.
.

Edit: I tried alert($(this).find('ul').html()); and I got an alert with the both the <li> elements.

$(this).find('ul').show(200); didn't work either

The content is not dynamically added.

My css looks like this:

 nav.main_nav ul.dropdown{
     opacity: 0; 
     position: absolute; 
     top: 35px; 
     left: 10px;  
     border-bottom-right-radius: 10px; 
     -moz-border-bottom-right-radius: 10px;
     border-bottom-left-radius: 10px; 
     -moz-border-bottom-left-radius: 10px;
     display: none;
     z-index: 100;
  }

Any ideas?

Answer 1

Found the problem, I had set opacity to zero in my stylesheet, which was preventing me from seeing the drop down menu.

Answer 2

Well first of all you have to make sure that what you click on isn't the link itself. Here you do a .click even to the li - But what if the user actually clicks the link? Well then they will be redirected to the href within the link.

So in order to prevent that you have to add a click event to the link it self:

$("#dropdown_menuitem a").click(function(e) {
    if($(this).parent().find('ul').length > 0) {
         e.preventDefault():;
    }
});

This will check if a dropdown exists in the current li - If it does we won't have it redirect the user to interrupt our JavaScript execution. So what we does is to prevent the current event. Such as the redirect.

Try it out and let me know if it worked :)