views:

41

answers:

0

My page navigation follows the following pattern:

<div id="topNav">
    <ul class="sf-menu sf-navbar">
        <li class="menustrip"><a>...</a>
            <ul class="navsubmenu">
                 <li><a>...</a></li>
                  ..................
            </ul>
         </li>
         <li class="menustrip">....</li>
         ............
     </ul>

I am using superfish to render the effects and I have also implemented the 'current' class to persist the selected primary menu. The problem is, when I hover my mouse on top of other primary menu tabs and try to go to their respective submenus they(the submenu) disappear immediately and 'current' submenu shows up. Any suggestion on how to do it with superfish?

Currently I am using two functions seperately to do this but they also have the same problem (which is obvious from how they are coded:(, silly me )

<script type="text/javascript">
            $(document).ready(function () {
                $("#topNav ul.sf-menu").superfish({
                    pathClass: 'current',
                    pathLevels: 2,
                    delay: 2000
                });
            });

            $("#topNav ul li a.current").parent().addClass('current');

            $('.current').children('.navsubmenu').css('padding-left', $('.current').position().left + 'px');
            $('.current').removeClass('menustrip');

            $('.menustrip').mouseenter(function () {
                $('.current').children('.navsubmenu').hide();
                $(this).children('.navsubmenu').css('padding-left', $(this).position().left + 'px');
                $(this).children('.navsubmenu').show();
            });
            $('.menustrip').children().mouseenter(function () {
                $('.current').children('.navsubmenu').hide();
                $(this.navsubmenu).css('padding-left', $(this).position().left + 'px');
                $(this.navsubmenu).show();
            });
            $('.menustrip').mouseleave(function () {
                $('.current').children('.navsubmenu').show();
                $(this).children('.navsubmenu').hide(); ;
            });
        </script>

By the way "$('.menustrip').children().mouseenter" part was experimental only:) so just check the first mouseenter and mouseleave functions. If you know of a better way of doing it please drop some hints. Thanks heaps in advance.