css - 导航列表样式出现在 chrome 的不同位置

Question

我在一个网站上工作，在主菜单(顶部导航栏)上，我使用 list-style 来分隔每个菜单项。在 Firefox 中显示正常，小圆圈位于每个菜单项之间。但是在 Chrome 上，它们似乎位于菜单项本身的后面。我不确定这是否与我的样式有关，或者它是否可能是 Chrome 错误。

网站链接:

http://cocobrownboutique.co.uk/site

我不会发布所有的 CSS，因为它是一个 Joomla 模板，因此会太长，但是我会发布我的额外 CSS:

#menubar {
    height: 25px;
}
.menu, .menu ul {
    list-style: circle outside none;
    margin-left: 20px;
}
.menu-dropdown li.level1 {
        height: 18px;
        padding: 0 32px 0 15px;
}
.menu-dropdown a.level1 > span, .menu-dropdown span.level1 > span {
    line-height: 25px;
}
.menu-dropdown li.level2 {
    list-style: none outside none;
}

如果需要主 menu.css 文件的链接，我当然会提供。如果我指出正确的方向，我将不胜感激，因为我一生无法理解为什么会这样。

Answer 1

我尝试在 chrome 上使用“firebug”。

添加 float :左；在你的菜单下拉列表中:

.menu-dropdown li{
position:relative;
float:left;
}

然后删除这个:

.menu-dropdown, .menu-dropdown .level1, .menu-dropdown .level1 > span{
float:left; <-- delete this
}