Css 高度和顶部。浏览器差异

我正在使用Drupal模板Zen子主题。我想实现一些菜单悬停效果。我想解释一下： 当您将鼠标悬停在菜单项上时，我希望图像显示在菜单项的底部。高度为30px； 所以，如果您将鼠标悬停在第一个菜单项上，您将看到如下内容：

item item item item
||||

此“| | | |”是显示在背景底部的图形。在这个图形下面开始内容。它与其他页面背景色呈正方形。此内容方块必须出现在菜单图形结束的完全相同的位置。我希望我已经解释得够好了。对不起，我的英语太差了

现在谈谈问题： 内容广场显示在FireFox和Opera菜单的正下方。在其他浏览器中，菜单背景图形显示在内容栏上，就像标签不存在的高度一样。我试图通过添加top:15px来解决这个问题；在chrome，IE等软件中也可以，但在FF和Opera中，我的高度为+top:15px；所以顶部有很大的空间

@编辑：这是菜单的代码

<div id="navigation"><div class="section clearfix">

        <h2 class="element-invisible">Menu główne</h2><ul id="main-menu" class="links inline clearfix"><li class="menu-390 first"><a href="/drupal-femini/gallery" title="">Gallery</a></li>
<li class="menu-394 active-trail active"><a href="/drupal-femini/node/15" class="active-trail active">Gallery2</a></li>
<li class="menu-339"><a href="/drupal-femini/node/1" title="Find out more">About</a></li>
<li class="menu-398 last"><a href="/drupal-femini/node/17">Contact</a></li>
</ul>

内容的CSS：

#main-wrapper {
  position: relative;
  top: 14px;
}

---

你能展示你的代码吗？html+CSD难道你没有链接到你的网站吗？@我头疼不，我是在本地建立的，对吗now@smogg-建立一个模型来展示你的问题如何？你会发现这是一个很好的方法来吸引人们回答你的问题你的li需要被显示：如果你想在所有浏览器中正确应用高度，请阻止。

#main-wrapper {
  position: relative;
  top: 14px;
}