Hi, I have been using superfish for the navigation for a site I am working on and have ran into problems regarding the "current" class that is applied to each li tag which is in the current path.
Whenever I hover over the top level, the 2nd level is displayed and the links are are all there, with the current one highlighted. However once I move the mouse away from the menu altogether, the 2nd level does not remain displayed with the links in it as before, instead they disappear after a delay, and I am left with a blank blue strip where the links should be. In the source of my page I have: <script src="http://users.tpg.com.au/j_birch/plugins/assets/js/ jquery-1.2.6.min.js" type=text/javascript></script > <script src="http://users.tpg.com.au/j_birch/plugins/assets/js/ jquery.tabs.pack.js" type=text/javascript></script > <script src="http://users.tpg.com.au/j_birch/plugins/assets/js/ jquery.history.pack.js" type=text/javascript</script > <script language=JavaScript src="/Relatis1/scripts/topnavigation.js" type=text/javascript></script > <script language=JavaScript src="/Relatis1/scripts/supersubs.js" type=text/javascript></script > <link href="/Relatis1/Skin/P/topnavigation.css" type=text/css rel=stylesheet> <link href="/Relatis1/Skin/P/topnav-horizontal.css" type=text/css rel=stylesheet> <script type=text/javascript>$(document).ready(function(){$ ('#horizontal-menu').superfish({pathClass: 'current'}); });</script > This is the same as the superfish example except that I have downloaded the css files and the 2 superfish javascript files onto my local machine and renamed them. The only change being in the "topnav- horizontal.css" file whereby I changed: .sf-navbar li ul { width: 44em; /*IE6 soils itself without this*/ } TO .sf-navbar li ul { width: 150em; /*IE6 soils itself without this*/ } As I needed the 2nd level strip to be wider as it contains more links than the example given. A snippt of my HTML source for the menu is: <UL class="sf-menu sf-navbar sf-js-enabled sf-shadow" id=horizontal-menu serial="0" sfTimer="1313775" jQuery1232031575583="451"> <LI class=current jQuery1232031575583="3"> <A class="sf-with-ul" id=11386_Tab onclick="" href="#" jQuery1232031575583="55">Home<SPAN class=sf-sub-indicator jQuery1232031575583="null">»</SPAN></A> <UL class="" style="DISPLAY: none; FILTER: ; VISIBILITY: hidden; ZOOM: 1" oldblock="block" jQuery1232031575583="452"> <LI class="" jQuery1232031575583="4"> <A class=sf-with-ul id=m11387 title="Complaint Search" onclick="" href="#" jQuery1232031575583="56">Complaint Search<SPAN class=sf-sub-indicator jQuery1232031575583="null">»</ SPAN></A> <UL class="" style="DISPLAY: none; FILTER: ; VISIBILITY: hidden; ZOOM: 1" oldblock="block" jQuery1232031575583="453"> <LI class="" jQuery1232031575583="57"> <A class="" id=m11388 title=Open onclick="" href="#" jQuery1232031575583="58">Open</A> </LI> <LI class="" jQuery1232031575583="59"> <A id=m11389 title=Pending onclick="" href="#" jQuery1232031575583="60">Pending</A> </LI> <LI class="" jQuery1232031575583="61"> <A id=m11390 title=Closed onclick="" href="#" jQuery1232031575583="62">Closed</A> </LI> <LI class="" jQuery1232031575583="63"> <A id=m15012 title=fdgdfgdg onclick="" href="#" jQuery1232031575583="64">fdgdfgdg</A> </LI> </UL> </LI> <LI class=current jQuery1232031575583="65"> <A id=m11440 title="Customer Search" onclick="" href="#" jQuery1232031575583="66">Customer Search</A> </LI> <LI class="" jQuery1232031575583="67"> <A id=m11391 title="Quote / Policy Search" onclick="" href="#" jQuery1232031575583="68">Quote / Policy Search</A> </LI> <LI class="" jQuery1232031575583="69"> <A id=m12064 title="Renewal Search" onclick="" href="#" jQuery1232031575583="70">Renewal Search</A> </LI> <LI class="" jQuery1232031575583="5"> <A class=sf-with-ul id=m12305 title=Calendar onclick="" href="#" jQuery1232031575583="71">Calendar<SPAN class=sf- sub-indicator jQuery1232031575583="null">»</SPAN></A> <UL style="DISPLAY: none; VISIBILITY: hidden" oldblock="block"> <LI jQuery1232031575583="72"> <A id=m12366 title=Day onclick="" href="#" jQuery1232031575583="73">Day</A> </LI> <LI jQuery1232031575583="74"> <A id=m12367 title=Week onclick="" href="#" jQuery1232031575583="75">Week</A> </LI> <LI jQuery1232031575583="76"> <A id=m12368 title=Month onclick="" href="#" jQuery1232031575583="77">Month</A> </LI> <LI jQuery1232031575583="78"> <A id=m12424 title="Calendar Settings" onclick="" href="#" jQuery1232031575583="79">Calendar Settings</A> </LI> </UL> </LI> <LI class="" jQuery1232031575583="6"> <A class=sf-with-ul id=m11900 title=Email onclick="" href="#" jQuery1232031575583="80">Email<SPAN class=sf-sub-indicator jQuery1232031575583="null">»</SPAN></A> <UL style="DISPLAY: none; VISIBILITY: hidden" oldblock="block"> <LI jQuery1232031575583="81"> <A id=m14210 title=Filters onclick="" href="#" jQuery1232031575583="82">Filters</A> </LI> <LI jQuery1232031575583="83"> <A id=m14211 title=Search onclick="" href="#" jQuery1232031575583="84">Search</A> </LI> </UL> </LI> <LI class="" jQuery1232031575583="7"> <A class=sf-with-ul id=m11780 title=FAQ onclick="" href="#" jQuery1232031575583="85">FAQ<SPAN class=sf-sub-indicator jQuery1232031575583="null">»</SPAN></A> <UL style="DISPLAY: none; VISIBILITY: hidden" oldblock="block"> <LI jQuery1232031575583="86"> <A id=m11781 title="All Groups" onclick="" href="#" jQuery1232031575583="87">All Groups</A> </LI> <LI jQuery1232031575583="88"> <A id=m11782 title="Top 10" onclick="" href="#" jQuery1232031575583="89">Top 10</A> </LI> <LI jQuery1232031575583="90"> <A id=m12668 title=AECustView onclick="" href="#" jQuery1232031575583="91">AECustView</A> </LI> </UL> </LI> <LI class="" jQuery1232031575583="8"> <A class=sf-with-ul id=m11760 title=News onclick="" href="#" jQuery1232031575583="92">News<SPAN class=sf-sub-indicator jQuery1232031575583="null">»</SPAN></A> <UL style="DISPLAY: none; VISIBILITY: hidden" oldblock="block"> <LI jQuery1232031575583="93"> <A id=m11761 title="News Browse" onclick="" href="#" jQuery1232031575583="94">News Browse</A> </LI> </UL> </LI> <LI class="" jQuery1232031575583="9"> <A class=sf-with-ul id=m12405 title=Folders style="CURSOR: default" jQuery1232031575583="95">Folders<SPAN class=sf- sub-indicator jQuery1232031575583="null">»</SPAN></A> <UL style="DISPLAY: none; VISIBILITY: hidden" oldblock="block"> <LI jQuery1232031575583="96"> <A id=m12124 title="My Folders" onclick="" href="#" jQuery1232031575583="97">My Folders</A> </LI> <LI jQuery1232031575583="98"> <A id=m12145 title="My Shares" onclick="" href="#" jQuery1232031575583="99">My Shares</A> </LI> </UL> </LI> <LI class="" jQuery1232031575583="100"> <A id=m14873 title="Home Page Helix" onclick="" href="#" jQuery1232031575583="101">Home Page Helix</A> </LI> <LI class="" jQuery1232031575583="102"> <A id=m14984 title="Captavia Search" onclick="" href="#" jQuery1232031575583="103">Captavia Search</A> </LI> </UL> </LI> </UL> You will see at the top the 'Home' li tag has the class 'current' and its 2nd level one called 'Customer Search' has the class 'current'. So surely this should ensure that the 2nd level remains visible once the user has finished hovering and moved away from the menu. Any help is much appreciated, Regards Chris
