jQuery code for multiple clickable drop down menu has errors, please advise?

Question

I am developing this jQuery script approach for a website drop down menu. I have come across a hiccup in the code that I cannot seem to get past.

---

Additional In

Answer 1

I guess I have the water for your hiccup. The problem is with this piece of code:

$(document).ready(function(){
  $("li:has(ul)").click(function(){
    $(".is-open").hide();
    $(this).find(".is-open").toggle();
  });
});

No matter what you do, it always closes everything and opens it. Adding a condition like this, makes it work:

$(document).ready(function(){
  $("li:has(ul)").click(function(){
    if ($(this).find(".is-open").is(":visible")) {
      $(".is-open").hide();
    } else {
      $(".is-open").hide();
      $(this).find(".is-open").toggle();
    }
  });
});

Output: http://output.jsbin.com/jodevoropu

Also I changed the following:

DROP 1    
DROP 1 

psst: Now mark this as complete! :P

1. Drop down menu expands upon clicking root level menu element. [COMPLETE]
2. Drop down menu closes upon clicking same root level menu element. [COMPLETE]
3. Drop down menu closes when clicking from one root level menu element to another. [COMPLETE]
4. Drop down menu closes upon clicking outside of the drop down menu area. [COMPLETE]
5. Support multiple drop down menus from root level menu. [COMPLETE]