无序列表显示不正确，正在使用 MooTools 和 UvumiTools 下拉插件答案

【问题标题】：Unordered List Displays Incorrectly, MooTools and UvumiTools Dropdown Plugin Being Used无序列表显示不正确，正在使用 MooTools 和 UvumiTools 下拉插件
【发布时间】：2011-04-25 05:39:23
【问题描述】：

我正在使用 MooTools 插件 UvumiTools DropDown 在我的网站上设置下拉菜单的样式。该插件采用一个无序列表并水平显示它，没有项目符号，然后在下面放置一个水平规则。每个列表项都可以翻转，如果其中有另一个 ul，则将其呈现为子菜单，如下所示。

<code>
<ul>
  <li>Menu A</li>
    <ul>
        <li>Menu A - Option 1</li>
        <li>Menu A - Option 2</li>
    </ul>
  <li>Menu B</li>
</code>

下拉菜单中的每一个li标签都是一个div，同样使用background-image和background-position来产生翻转效果，如下图。

<code>
<ul>
    <li><div id="optionOne"><a href="#">Menu A</a></li>
<ul>
</code>

该网站在 Firefox 中 100% 正确显示和运行，在顶级选项上滚动，下拉菜单显示在水平线下方，但不幸的是，这似乎是唯一的浏览器，Chrome 和 Safari 都错开破坏整个事情的清单。

火狐：http://img560.imageshack.us/img560/7139/screenshot20110425at130.png

铬：http://img835.imageshack.us/img835/8375/screenshot20110425at129.png

有人知道我做错了什么吗？这是我第一次使用这个插件。

【问题讨论】：

如果你愿意，我可以将你链接到实际页面，我无法让 jsfiddle 工作。 blacksciencesoftware.com/Design2011 引用的重要 url 是页面的主要 CSS blacksciencesoftware.com/Design2011/css/design2011.css 和下拉菜单的 CSS blacksciencesoftware.com/Design2011/css/uvumi-dropdown.css 下拉菜单的 js 文件未修改其原始状态。有趣的是，如果您在任何呈现不正确的浏览器中放大和缩小，整个内容都会捕捉到正确的位置（Firefox，Safari，在 OS X 上）

标签： javascript html css mootools

【解决方案1】：

我不知道为什么，但 WebKit（即 Safari 和 Chrome）不喜欢来自 .softwareLink a 的 max-width:93px。有时我在 Chrome/Safari 中看到奇怪的包装，有时我没有，也许在布局引擎的某处有一些基于时间的反馈。

在.softwareLink a 中使用width:93px 应该始终如一地工作（并使您的菜单项的大小都相同）。您必须将your spritesheet 更改为垂直而不是水平，否则它会稍微溢出链接的右侧。

顺便说一句，我还看到一个 JavaScript 错误：

TypeError：表达式“E.create”[undefined] 的结果不是函数。
/Design2011/js/mootools-for-dropdown.js:173

【讨论】：