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

添加浮动：左；在你的 menu-dropdown li 上：

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

并删除：

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