Drop-down menu problems

Question

I have recreated my menu here: http://jsfiddle.net/bVQ2H/2/ As you can see, it has a drop-down menu, and what I was trying to do was to add a class when mouse is over that dropdown menu & "More" button, basically this class should be added to the "li" element that contains the dropdown menu and "More" button.

The delay, before the "focusedmenu" class dissappears, should be kept.

I can use only Mootools, NO jQuery.

Any idea how I can achieve it?

JS Code

window.addEvent('domready', function() {
  var timer;
  $$('li.submenu_explore').addEvents({
    mouseenter: function(){
      $$('li.submenu_explore').addClass('focusedmenu');
    },
    mouseleave: function(){
      timer = function(){ $$('li.submenu_explore').removeClass('focusedmenu'); }.delay(1000);
    }
  });
});

HTML Code:

<div class="layout_core_menu_main">
  <ul id="navigation">
      <li><a href="#">Albums</a></li>
      <li><a href="#">Blogs</a></li>
      <li><a href="#">Classifieds</a></li>
      <li class="submenu_explore">
        <a href="javascript:void(0);" id="submenu_toggle">More</a>
        <ul>
          <li><a href="#">Groups</a></li>
          <li><a href="#">Videos</a></li>
          <li><a href="#">Music</a></li>
        </ul>
    </li>
  </ul>
</div>

CSS Code:

/*
MAIN MENU
*/
.layout_core_menu_main
{
  height: 38px;
  border: 1px solid #000;
  background: #111;
}
.layout_core_menu_main > ul
{
  width: auto;
  margin: 0px auto 0px auto;
  position: relative;
}
.layout_core_menu_main > ul > li
{
  float: left;
}
.layout_core_menu_main > ul > li > a
{
  font-size: 12px;
  font-weight: bold;
  line-height: 38px;
  outline: none;
  display: inline-block;
  padding: 0px 16px;
  position: relative;
  border-right: 1px solid #000;
}
.layout_core_menu_main > ul > li > a:link, .layout_core_menu_main > ul > li > a:visited
{
   color: #EEE;
   text-decoration: none;
}
.layout_core_menu_main > ul > li > a:hover, .layout_core_menu_main > ul > li:hover > a
{
  color: #FFF;
  font-weight: bold;
  text-decoration: none;
  background: #000;
}
.layout_core_menu_main > ul > li.active > a, .layout_core_menu_main > ul > li > a:active, .layout_core_menu_main > ul li.focusedmenu > a
{
  background: #000;
  color: #FFF;
  font-weight: bold;
  text-decoration: none;
}


/*
Submenu for MAIN MENU
*/
.layout_core_menu_main > ul > li > ul
{
  margin-top: 1px;
}
.layout_core_menu_main > ul > li:hover > ul, .layout_core_menu_main > ul li.focusedmenu ul
{
  display: block;
}
.layout_core_menu_main ul ul
{
  display: none;
  position: absolute;
  right: 0px;
  z-index: 1;
  background-color: #EEE;
  border: 1px solid #AAA;
  width: 200px;
  padding: 5px 0px;
  font-size: 12px;
  font-weight: bold;
}
.layout_core_menu_main ul ul li
{
  font-weight: bold;
}
.layout_core_menu_main ul ul li a
{
  display: block;
  padding: 0px 10px;
  line-height: 26px;
  text-align: left;
  color: #555;
  text-shadow: 1px 1px 0px #FFF;
  outline: none;
  text-decoration: none;
}
.layout_core_menu_main ul ul li a:hover, .layout_core_menu_main ul ul li.active > a
{
  color: #333;
  background: #FFF;
  text-decoration: none;
}
li.submenu_explore
{
  position: relative;
}
li.submenu_explore > a
{
  background: #000;
}

Answer 1

Adding a delay to your mouseenter event appears to provide a workaround.

mouseenter: function(){
  timer = function(){ 
    $$('li.submenu_explore').addClass('focusedmenu'); 
    $$('#Output').set('html',$$('li.submenu_explore').hasClass('focusedmenu'));                        
  }.delay(1000);
}

Working Example: http://jsbin.com/uvoxiq/5/edit