导航列表样式出现在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{
position:relative;
float:left;
}

并删除此内容：

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