Question

I find my self doing this but not sure if this is the best way. Here an example.

<ul id="menubar">
  <li><a class="menu_item">File</a>
    <ul>
      <li><a id="menu_file_new">New</a></li>
      <li><a id="menu_file_open">Open</a></li>
    </ul>
  </li>
  <li><a class="menu_item">Run</a>
    <ul>
      <li><a id="menu_run_preview">Preview</a></li>
      <li><a id="menu_run_compile">Compile</a></li>
    </ul>
  </li>
</ul>

JQuery

$('.menu_item').hover(function(){
    $(this).find('ul').show();
});

Just wondering is this the best way, find seems a bit overkill?

---

EDIT: I can’t use css because of this: Fails in Opera/IE when an item is clicked/hover it fails in those two browsers. http://jsfiddle.net/cJsn2/1/ this is because of html standard.

Answer 1

This would be a simple hover script:

// I'm purposely using `toggleClass`, instead of show/hide, to
// have more flexibility with styling
$('.menu_item').each(function () {
  var $li = $(this).closest('li');

  $(this).hover(function () {
    $li.toggleClass('hover');
  });
});

with the following css:

ul ul {
  display: none;
}

li.hover > ul {
  display: block;
}

demo: http://jsbin.com/ehifod/1/