css - Cufon 导致下拉菜单出现间隙

Question

我被这个网站上的下拉菜单问题困住了 http://www.leithonthefringe.com/ (将鼠标悬停在表演者信息上以查看问题)。

基本上主菜单和下拉列表中的第一个元素之间出现很大的差距，它影响 FF/IE/Chrome。

非常感谢任何想法!

CSS如下:

#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; }

//更新

问题似乎是 cufon 渲染了一个似乎不存在的空白作为 cufon 文本 - 任何关于为什么会发生这种情况的想法也很感激。

解决方案原来是在#main-menu-nav a 而不是#main-menu-nav ... 上渲染 cufon

Answer 1

路上有一个cufon。

<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>