导航列表样式出现在不同位置上的铬

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

我试着用“萤火虫”在铬上。

添加float：left;在你的菜单下拉李：

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

并删除此：

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