/*
for css based versions extend the li
below the menu so that the mouse will
stay over the li and keep the hover active
*/

ul.main-menu li.submenu:hover
{
  padding-bottom: 2em;
}

ul.main-menu li.submenu:hover ul 
{
  left: 0;
  visibility: visible;
}