jQuery Forum

The second line of my superfish menu disappears on mouse out of it's parent, or children. How do you get the second line to stay visible after the parent or children are clicked?

I would like the secondary menu to remain visible while the user is considering the sub pages. How do I get the second level of my horizontal menu to remain visible after the hover leaves?

http://www.redrhinoflooring.com/

There is lots of information about drop down menus, what about horizontal secondary navigation?

I've figured out how to get lots of things to happen, but I can't get the Current sub menu to remain after hover leaves (until another item gets hovered)

Here is a sample menu:
1st line: •ANIMALS   •MINERALS  •VEGETABLES
2nd line Animals: -dogs -cats -hamsters
2nd line Minerals: -diamonds -rubies -emeralds
2nd line Vegetables: -tomatos  -eggplant -beans -carrots

I want the secondary menu to stay lit after it's parent is clicked, and be replaced by the secondary menu of another hovered parent (if nothing is clicked, it would return to selected menu.

I've poked around the css enough to suspect it is jquery that holds the answer. Any ideas?

(reposted to get through the xmas rush)

In my superfish horizontal menu bar (nav-bar style) I need the sub-menu to stay visible while it's parent is selected (not just on hover).

I've tryed adding styles and have experimented with adjusting the .js files, but have been unable to achive this effect.

Here is what I want my menu to do (that I haven't been able to achieve yet):

menu color: #777
Current hover red
Current menu red.
Current sub menu item red
Current sub menu remains after hover leaves, while on that page.

tx

I have an item at the end of a menu that when it is moused over, it makes a form visible underneath it. On some machines running Safari the form flashes on and of on hover, and disappears when the mouse leaves the trigger.

I can get it to happen in Firefox if I move the mouse super slow from the trigger word to the box. I've tried moving the log in box closer with css, and it still happens.

here is the javascript:
    $(document).ready(function(){       
        var both = $(".both");
        var apMysfm = $("#mysfm_login");
               
        $(function(){
            apMysfm.hide(0,"#apMysfm");         
            both.hover(
                function () {
                    apMysfm.show(0,"hover");
                },
                function () {
                    apMysfm.hide(0,"hover");
                }
            );
        });       
    });    

here is where it lives: https://www.soundfamilymedicine.com/joomla15/

My testing worked well in my own "http" testing environment, but the production server I am moving to throws a warning that "page is calling out-side secure environment..." that is not in the same https.

My options are to self host jQuery or find another solution.  I clicked "down load code",  cut and pasted it into bb edit, saved it with the suggested file name to a directory on the production server, called the script in the head with a path copied from other <script> loading tags - but jQuery doesn't seem to be loading

Thank you

I am using superfish in a joomla site. It works great in Firefox and Safari, but not in Chrome or ie. 

The menu dropdowns appear behind the Flash Movie.

I've implemented the fixes suggested here:
http://brenelz.com/blog/squish-the-internet-explorer-z-index-bug/

but to no avail.

any Ideas?

http://sfm.alfydog.com
doesn't work in chrome or ie

  
    $(".blue").hide(0,".blue");
   
    $(".red").hover(
      function () {
        $(".blue").show("hover");
      },
      function () {
        $(".blue").hide("hover");
      } 
    );
 });
</script>
<div class="red">

<p>red box</p>

</div>

<div class="blue">

<p>blue box</p>

</div>

[/code]
here's the css if you need it:
p {margin: 0px;}

.red {
    background-color: red;
    width: 80px;
    height: 30px;
}

.blue {
    background-color: blue;
    width: 80px;
    height: 60px;
}

I want to have a drop down menu that reveals a menu position in the drop down, not a <li>link</li>. The module has a login / password / registration form. I tried to use a javascript to hide / un-hide but couldn't get the absolute positioning to work.

Any Ideas?

Thanks, super

Where is the css rule that governs the white borders between the drop-down menu items?