title: event handler triggered before event occurs in jquery
body: <p>I am doing a mega drop down menu whereby a user clicks on an item to display the extension.
  I want two results onclick of an item:</p>
  
  <ol>
  <li>the extension to be displayed</li>
  <li>the background color to change for the menu item(the one that is clicked)</li>
  </ol>
  
  <p>but I am having a hard time and both of these results happen before the onclick event occurs.</p>
  
  <p>All other things are so far good below is my code</p>
  
  <pre><code>//call the showMenu function to toggle menu items display   
  showMenu("#market", "#marketDrop");
  showMenu("#jobs", "#jobsDrop");
  showMenu("#career", "#careerDrop");
  showMenu("#tech", "#techDrop");
  showMenu("#estate", "#estateDrop");
  showMenu("#fair", "#fairDrop");
  showMenu("#leisure", "#leisureDrop");
  showMenu("#exclusive", "#exclusiveDrop");
  
  //the showMenu function
  function showMenu(listItem, dropDown){
    //first hide the main drop down containers
    $(dropDown).hide();   
    $(listItem).click(function() {
      $(dropDown).fadeToggle();
    });
  
    $(listItem).click().css("background-color", "#000");      
  }
  </code></pre>