Hello, I am setting up my first superfish menu and having an issue with the width of the top level link tabs.
When javascript is off, the width of the top level links look exactly how I want them - with flexible width to accomodate the link text and 7px padding either side. When javascript is on, extra width seems to be added to the top level links - I am not sure what is causing it. It does get it right for the active state (which is wierd because there is no width for that in the css either). Here is a visual: http://www.gocreate.com.au/superfish-menu-spacing.jpg So what I am wanting to do is stop jquery / superfish adding extra width to the menu so that it looks the same with js on or off. The only widths mentioned in the css are as follows but changing these to "auto" does not have any effect on the width of the links: .sf-menu ul { position: absolute; top: -999em; width: 12em; } .sf-menu ul li { width: 100%; } My javascript knowledge is very limited (I am a css'er) - with a bit of googling and the more user friendly nature of jquery, I found some tricks that I could try but as yet have been unable to solve it. My base code is as follows: $("ul.sf-menu").supersubs({ minWidth: 8, maxWidth: 13, extraWidth: 1 }).superfish(); $('ul.sf-menu').superfish({ delay: 1000, animation: {opacity:'show',height:'show'}, speed: 100, autoArrows: true, dropShadows: true }); $('ul.sf-menu > li > a span').remove(); // remove arrows from top level links The same thing happens with or without using the supersubs plugin. Adding this does reduce the width of each link but it makes all top level links the same width - so that's not suitable: $(".sf-menu li").css("width","100px"); Adding any of these variations do not seem to do anything (the idea being to reduce any width setting that jquery may 'secretly' be adding): $('ul.sf-menu li').css('width', ''); or $("ul.sf-menu li").css("width",""); or $('ul.sf-menu li')[0].style.width = ''; or $('ul.sf-menu li').style.removeAttribute("width", false); Then I thought maybe I could add a class to the top level links with jquery and set width:auto in the css for the class but that does not seem to solve it either: $("ul.sf-menu li").addClass("jq-wfix"); So now I am scratching my head... Any ideas? Thanks in advance.