var timeOutId;
var openMenu = null;
var menuStyle = null;
var timeOutId = null;
var openMenu = null;

$(document).ready(function() {
  $("#cssMenu > li").mouseover(function() {
    $(this).css({ backgroundColor: "#003042" });
    menuDropDown($(this).find("ul"), true);
  }).mouseout(function() {
    $(this).css({ backgroundColor: "#218096" });
    menuDropDown($(this).find("ul"), false);
  });

  $("#cssMenu > li > ul > li").mouseover(function() {
    $(this).find("a").css("color", "#003042");
  }).mouseout(function() {
    $(this).find("a").css("color", "#FFFFFF");
  });

});

function menuDropDown(menu, mouseover) {
  menuUL = menu[0]; // .find('ul') geeft een array terug, met op het moment altijd maar één item

  if (menuUL != openMenu) {
    if (openMenu)
      menuStyle.display = 'none'; // het vorige menu-item verbergen

    if (!menuUL) return; // nog wel even het vorige menu verbergen, maar niet verder

    openMenu = menuUL;
  }

  if (!menuUL) return;

  menuStyle = menuUL.style;

  if (mouseover) {
    menuStyle.display = 'block';
    clearTimeout(timeOutId);
  } else {
    timeOutId = setTimeout('menuStyle.display = "none";', 1000);
  }
}