I'm stuck on a problem with the drop down menu on this site http://www.leithonthefringe.com/ (hover over performer information to see problem).
Basically a large gap appears between the main menu and the first item in the drop down, it affects FF/IE/Chrome.
Any thoughts greatly appreciated!
CSS is as follows:
#menu-main-nav { margin: 0px; padding: 0px; }
#menu-main-nav li { float: left; list-style: none; height: 40px; font-size: 20px; }
#menu-main-nav li a { display: block; background: #333333; padding: 12px 24px 8px 24px; text-decoration: none; border-right: 1px solid #444444; color: #EAFFED; white-space: nowrap; }
#menu-main-nav li a:hover { background: #222222; }
#menu-main-nav li ul { margin: 0px; padding: 0px; height: 40px; position: absolute; visibility: hidden; border-top: 1px solid white; z-index: +1 }
#menu-main-nav li ul li { float: none; display: inline; }
#menu-main-nav li ul li a { width: auto; background: #750000; color: #FFFFFF; border-right: none; }
#menu-main-nav li ul li a:hover { background: #8d0101; }
//Update
The problem seems to be cufon rendering a white space that doesn't seem to exist as cufon text - any thoughts on why that would happen also appreciated.
The solution turned out to be to render cufon on #main-menu-nav a rather than #main-menu-nav...
Theres a cufon in the way.
<cufon class="cufon cufon-canvas" alt=" " style="width: 4px; height: 20px; "><canvas width="14" height="22" style="width: 14px; height: 22px; top: -2px; left: 0px; "></canvas><cufontext> </cufontext></cufon>