Question

I got this navbar with a dropdown ul on it.

<ul class="topbar-nav">
<li><a href="index.php">Home</a></li>
<li><a href="services.php" class="fixed_hover">Services</a>
   <ul class="drop_down">
      <li><a href="#">lorem</a></li>
      <li><a href="#">lorem</a></li>
   </ul>
</li>
<li><a href="contact.php">Contact</a></li>
 </ul>

I’ll just put the css for the hovered state of the “topbar-nav li”

ul.topbar-nav a.selected, ul.topbar-nav a:hover{
    color:#000;
    background:url(img/nav_hove.png) no-repeat;
    margin:0;
    padding-top:2px;
    }

And here is the jq code to slideDown/up the dropdownmenu. (I got this code from a tutorial )

function mainmenu(){
$(" .topbar-nav ul ").css({display: "none"});
$(" .topbar-nav li ").hover(function(){
    $(this)
      .find('ul:first:hidden')
      .css({visibility: "visible",display: "none"})
      .slideDown(400);

    },function(){
        $(this)
          .find('ul:first')
          .slideUp(400);
    });
}
$(document).ready(function(){
    mainmenu();
});

Now, everything is perfect, but i want the css hover rule (which assign the nav_hove.png background to the ul.topbar-nav li) to be present when you are hovering over the dropdown menu items, i couldn’t do it with css, so i decided to try it by myself on jquery, and it worked except that when i hover again on the “services” tab no background will come to place. Here is my messy code for that:

$(function fixed_hover(){
   $("ul.drop_down li").hover(function fixed_hover(){
            $(".fixed_hover").css('background', 'url(img/nav_hove.png) no-repeat');
        }
    );
});
$(function fixed_hover2(){
      $("ul.drop_down li").mouseleave(function fixed_hover2(){
            $(".fixed_hover").css('background', 'none');
        }
    );
});

I’ll appreciate any kind of help, and i’ll thank you guys in advance for just reading this much. If you need more info about it, just let me know, though i hope i made myself clear.

Answer 1

In your second function, try setting the property to a blank value instead of none, like so:

$(".fixed_hover").css('background', '');

Otherwise, you’re already using a class for selected, so why not just add and remove that?

$(function fixed_hover(){
   $("ul.drop_down li").hover(function fixed_hover(){
            $(".fixed_hover").addClass('selected');
        }
    );
});
$(function fixed_hover2(){
      $("ul.drop_down li").mouseleave(function fixed_hover2(){
            $(".fixed_hover").removeClass('selected');
        }
    );
});