Also notice that the jQuery is adding lots of information into my HTML tags such as jQuery1232031575583="..." in the anchor tags and list item tags. it also adds <span class=sf-sub-indicator jQuery1232031575583="null">»</span> inside the anchor tags, I presume to get the arrows.
I noticed in the source of the example given by superfish that this does not appear in their tags On Jan 15, 4:00 pm, cajchris <cajch...@gmail.com> wrote: > 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
