Popup CSS menu with jQuery in IE6

Question

Hi Gurus,

I have this very simple jQuery function that allows ul.lev2 to show on hover.

$('#tab_menu li.li_level1').hover(
  function() { $('#tab_menu ul.li_level2', this).css('display', 'block'); },
  function() { $('#tab_menu ul.li_level2', this).css('display', 'none'); });

Unfortunatelly it dosent work with my html markup. I really cannot find what is going wrong.

HTML:

<div class="tab_menu menudefault" id="tab_menu">
<ul id="tab_menu_ul" class="level_1">
<li class="reserves level_1 parent parent_level_1 parent_ parent_level_1_ ">
            <span class="reserves level_1 parent parent_level_1 parent_ parent_level_1_  menuitem">123</span>
      <ul class="level_2 child_of_Reserves">
          <li class="find_a_nature_reserve level_2 parent parent_level_2 parent_ parent_level_2_ ">
              <span class="find_a_nature_reserve level_2 parent parent_level_2 parent_ parent_level_2_  menuitem">abc</span>
             </li>
          <li class="visitor_information level_2 noline child lastlev2 last">
              <a href="#" class="visitor_information level_2 noline child lastlev2 last menuitem">cde</a>
          </li>
            </ul>
        </li>
</ul>
</div>

Whenever I will remove $(this) from jQuery it seems to work, but I have more then one li tag with ul.lev2 so it is obviosly shoving all the child ul tags whenever Ill hover any parent li.

Any ideas please?

Answer 1

$('#tab_menu ul.li_level2', this)

You're saying to select ul.li_level2 elements somewhere inside the #tabmenu, somewhere inside this. Since this is a level 1 element, you'll never find #tabmenu inside this!

This is a “scoped selector”. It requires that the leftmost element in the selector (#tabmenu) be inside the context node (this), not just the rightmost element that is the one you're actually selecting.

You probably meant:

$('ul.li_level2', this)

As this is always inside #tab_menu you don't need to check for that.

jQuery's context nodes always introduce a scoped selector. This is in contrast to the Selectors-API methods such as document.querySelector(), which would work with your example as the selected ul.li_level2 is both inside #tab_menu and inside this. (Selectors-API Level 2 proposes to introduce scoped selectors as a browser-level standard too but no-one has implemented it yet.)

Answer 2

ehm.. Youre trying to access

$('ul.li_level2', this)

but i doesnt exist in you posted code. you should be finding

$('ul.level2', this)