Question

Let’s say I have a poorly structured drop-down menu, something akin to:

<div class="regular"><a href="#">title</a></div>
<div class="menu">
    <a href="#">title</a>
    <div class="menu_wrapper">
        <a href="#">sub title</a>
        <a href="#">sub title</a>
    </div>
</div>

In this scenario, it’s been built with .menu_wrapper having the property of position:absolute; resulting in a scenario where when the top level .menu is hovered over, .menu_wrapper isn’t considered part of the same element therefore when attempting to hover over it a break is caused because it’s no longer part of the same hover event.

I’m wondering if it’s possible to have an event binder on .menu but then once the event is trigged, extend the binder to .menu_wrapper explicitly so that the “hover effect” is stable and working.

It seems like an easier solution than trying to re-arrange the bulk of poorly structured CSS I have.

Any ideas, opinions, help in general would be greatly appreciated ;).

Answer 1

I managed to solve the issue by using both a mouseover/mouseout event.

This definitely isn’t the most efficient way to handle this, but it’s a decent fix:

   $('div.menu').mouseover(function() {
       $(this).find('div.menu_wrapper').show();
   });

   $('div.menu_wrapper').mouseout(function() {
       $(this).hide();'
   });