这个问题似乎很疯狂，但我想清楚地解释一切。
期望的结果
我有一个带有子菜单的水平菜单栏。我从头开始创建它，所以我没有使用任何现有的框架。它使用按钮、锚点和跨度的组合进行语义标记。
- 进入新页面的项目的锚点
- 不去任何地方但有子菜单的项目的按钮
- 禁用项目的跨度
注意：此站点仅适用于有限数量的特定用户，因此我不担心缺乏可访问性。
子菜单的宽度应与其包含的最宽菜单项一样宽。每个菜单项应填充子菜单的宽度，以便光标和焦点轮廓按需要显示。
问题
在 Firefox 中，在以下情况下，子菜单不会扩展到最宽项的宽度：
- 子菜单绝对定位
- 子菜单包含在具有非静态位置的块中
- 最长的菜单项是一个按钮
我已经用 Chrome、IE 8、Firefox 12 和 Firefox 20 进行了测试。它在 Chrome 和 IE 中按需要显示，但在任何版本的 Firefox 中都没有。
我创建了一个缩小版本，其中包含 JavaScript、图像、禁用项和许多菜单项。代码在下面，也在jsFiddle上。这是 Firefox 20 中的屏幕截图。
注意章节标题项目是如何被挤压的。子菜单仅与“页面标题”项一样宽（带有填充）。还要注意在顶级子菜单中这不是问题 - 该菜单扩展到自定义 PDF 标题的宽度。
Section Titles项目是一个按钮。如果我将其更改为锚点，则子菜单会根据需要展开。如果我将按钮 CSS 更改为 remove width: 100%，则子菜单会根据需要展开。但是，比子菜单窄的菜单项不再填充宽度（即使我添加了display: block）。
这是上述修复如何破坏菜单其他部分的屏幕截图。
请注意，当鼠标悬停在文本之外时，光标不是指针。是的，我可以通过更改 的光标来解决这个li问题，但另一个问题是焦点轮廓。我希望焦点大纲围绕整个菜单项，而不仅仅是文本（这是它的工作方式width: 100%）。
我也尝试过玩弄-moz-box-sizing，但仍然没有乐趣。
作为一个简单的解决方法，对于这种特殊情况，我只是在页面标题 中添加了一些以使其更长。但是当动态创建菜单时，该解决方案将不起作用。
HTML 代码 ( jsFiddle )
<ul id="navAdminMenu">
<li><a href="#">Companies</a></li
><li class="hasSubmenu"><button type="button">Books</button>
<ul>
<li><a href="#">Manage Books</a></li
><li><a href="#">PDF Profiles</a></li
><li class="hasSubmenu"><button type="button">Customize PDF Titles</button>
<ul>
<li><a href="#">Page Titles</a></li
><li class="hasSubmenu"><button type="button">Section Titles</button>
<ul>
<li><a href="#">Profile Section</a></li
><li><a href="#">Index Section</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li
><li class="hasSubmenu"><button type="button">Lists</button>
<ul>
<li class="hasSubmenu"><button type="button">Categories</button>
<ul>
<li><a href="#">Manage</a></li
><li><a href="#">Reports</a></li>
</ul>
</li
><li><a href="#">Key Contact Positions</a></li>
</ul>
</li>
</ul>
CSS 代码
#navAdminMenu {
font-family: Arial, Helvetica, sans-serif;
font-size: 1em;
list-style: none;
margin: 0;
padding: 0;
background-color: #efefef;
}
#navAdminMenu button {
margin: 0;
padding: 0;
vertical-align: baseline;
border: none;
background-color: transparent;
cursor: pointer;
font-family: Arial, Helvetica, sans-serif;
font-size: 1em;
}
#navAdminMenu button::-moz-focus-inner {
padding: 0;
border: none;
}
#navAdminMenu a {
text-decoration: none;
}
#navAdminMenu li {
display: inline-block;
margin: 0;
border-right: 1px solid #ccc;
}
#navAdminMenu li:hover {
background-color: #4b545f;
}
#navAdminMenu > li > button, #navAdminMenu > li > a {
display: inline-block;
height: 2.3em;
line-height: 2.6;
padding: 0 10px;
}
#navAdminMenu > li > button, #navAdminMenu > li > a {
color: #06c;
}
#navAdminMenu > li > button:focus, #navAdminMenu > li > a:focus {
outline: 0; /* Firefox displays outline outside the menu box-shadow */
box-shadow: 0 0 0 3px #06c;
}
#navAdminMenu > li:hover > button, #navAdminMenu > li:hover > a {
color: #fff;
}
#navAdminMenu > li.hasSubmenu > button:after {
content: "v";
display: inline-block;
width: 13px;
margin-left: 5px;
}
#navAdminMenu ul {
display: none;
position: absolute;
padding: 0;
background-color: #5f6975;
}
#navAdminMenu li:hover > ul {
display: block;
}
#navAdminMenu ul > li {
display: block;
position: relative;
border-top: 1px solid #999;
border-bottom: 1px solid #000;
}
#navAdminMenu ul > li > button, #navAdminMenu ul > li > a {
height: 2em;
line-height: 2;
padding: 0 30px 0 10px;
white-space: nowrap;
}
#navAdminMenu ul > li > button {
width: 100%; /* full width of submenu */
text-align: left;
}
#navAdminMenu ul > li > a {
display: block; /* full width of submenu */
}
#navAdminMenu ul > li > button, #navAdminMenu ul > li > a {
color: #fff;
}
#navAdminMenu ul > li > button:focus, #navAdminMenu ul > li > a:focus {
outline: #fdcb01 solid 3px;
}
#navAdminMenu ul > li.hasSubmenu > button:after {
content: ">";
width: 16px;
position: absolute;
right: 0;
}
#navAdminMenu ul ul {
left: 100%;
top: 0;
}
问题
我缺少一些简单的东西吗？还是我应该将此作为错误报告给 Mozilla？
注意：我不想将按钮更改为锚点。