$(document).ready(function() {
  var toggle = function(direction, display) {
    return function() {
      var self = this;
      var box = $("ul", this);
      if( box.css("display") == display && !self["block" + direction] ) {
        self["block" + direction] = true;
        box["slide" + direction]("slow", function() {
          self["block" + direction] = false;
        });
      }
    };
  }
  $("#arealist ul li").hover(toggle("Down", "none"), toggle("Up", "block"));
  $("#arealist ul li ul").hide(); 
});