Super fish hover on page load

Question

Hi I am using jquery superfish and I need active(hover) first menu item on page load but on hover another menu item cancel that hover on first item. Any suggestion?

This is html code for menu

<ul class="sf-menu" >
        <li class="current">
            <a href="#"><img class="imgbottom1" src="images/domecky.jpg" alt="venkovní plochy">
            <div class="obaldomecky"><h4>venkovní plochy</h4></div></a>
            <ul class="first">
                <li>
                    <a href="#">120m2</a>
                </li>

            </ul>

        </li><li>
            <a href="#"><img class="imgbottom1" src="images/domecky.jpg" alt="venkovní plochy">
            <div class="obaldomecky"><h4>venkovní plochy</h4></div></a>
            <ul class="second">
                <li>
                    <a href="#">120m2</a>
                </li>

            </ul>

        <script>
   $('#test').hover(

   function(){ $(this).removeClass('sfHover')}

      )</script>

my website sis here http://www.manko-design.cz/demo/ its not working how I need. I need this. When I move cursor on another image in that row script remove class from first image. If I move out cursor from image to out from image but not on another image in row last hover image stay hover.

Answer 1

You can make the last hovered li>ul element always visible by attaching a class .current to it and forcing its opacity and display properties as follows:

Javascript:

$(document).ready(function(){
    $('ul.sf-menu').superfish();
    var last_hover = $('.sf-menu>li:first');
    $('ul.sf-menu>li').hover(function () {
        last_hover.removeClass('current');
        last_hover = $(this);
        last_hover.addClass('current');
    }, function(){
    });
});

CSS:

.current > ul {
    display:block !important;
    opacity:1 !important;
}

fiddle