Html IE 7/8 CSS菜单问题

我的CSS下拉菜单有一个奇怪的问题。它显示了，但隐藏在另一个元素后面，列表项之间的空间越来越大

CSS代码非常标准：

/*CSS Menu*/
#navigation li.menu ul
{
    visibility: hidden;
    position: absolute;
    top: 40px;
    right: 5px;
    height: 15px;
    padding-top: 10px;
}
#navigation li.menu:hover ul
{
    visibility: visible;
}
#navigation li.menu ul li
{
    border: 1px solid gray;
    border-top: none;
    border-bottom: 1px dotted #ccc;
    z-index: 999999;
    position: relative;
}
#navigation li.menu ul > li > a
{
    padding: 2px 5px 2px 5px;
    background-color: blue;
    text-align: right;
    display: block;
    color: black;
    background: white;
}
#navigation li.menu ul li a:hover
{
    color: white;
    background: #ccc;
}
#navigation li.menu ul li a:visited
{
    color: black;
}

IE修复代码如下：

#navigation li.menu ul li
{
    border: 1px solid gray;
    border-top: none;
    border-bottom: 1px dotted #ccc;
    z-index: 999999999;
    position: relative;
    background-position: 0 0;
}
#navigation li.menu ul > li > a
{
    padding: 2px 5px 2px 5px;
    background-color: blue;
    text-align: right;
    display: block;
    color: black;
    background: white;
}

菜单的HTML代码：

<code>
  <div id="navigation" style="border: 0px solid #000; float: right;">
    <ul >
      <li class="top"><a href="index.php"><span class="left"></span><span class="right">Home</span></a></li>
      <li class="top"><a href="storage.php"><span class="left"></span><span class="right">Storage</span></a></li>
      <li class="top"><a href="advertiser-info.php"><span class="left"></span><span class="right">Advertisers</span></a></li>
      <li class="top"><a href="supplies.php"><span class="left"></span><span class="right">Supplies</span></a></li>
      <li class="top"><a href="franchise-opportunities.php"><span class="left"></span><span class="right">Franchise Opportunities</span></a></li>
      <li class="menu top"><a href="about-us.php"><span class="left"></span><span class="right">About Us</span></a>    
        <ul>
          <li><a href="./contact-us.php">Contact Us</a></li>
          <li><a href="./history.php">Company History</a></li>
          <li><a href="./guarantee.php">Customer Guarantee</a></li>
          <li><a href="./faq.php">FAQ</a></li>  
        </ul>
      </li>
    </ul>
  </div>
</code>

这取决于另一个元素是什么，以及这个div块周围的其他DOM元素

如果它是一个flash元素，那么您可能需要使用Javascript来防止flash元素隐藏CSS下拉列表

另外，检查其余DOM元素的样式，以确保它们都未设置为浮动。有时，浮动对象也会导致这种情况

对不起，很难说得更具体。我复制了你的代码，制作了一个快速的HTML页面，只使用div块和你粘贴的CSS，在Firefox中查看，没有空格，没有空格，没有空格，没有空格，下拉列表位于主菜单上方的一层。一切似乎都很正常

Firefox版本：Mozilla/5.0（Windows；U；Windows NT 6.0；en-US；rv:1.9.1.3）Gecko/20090824 Firefox/3.5.3（.NET CLR 3.5.30729）

---

编辑：这仅在IE7/8中有问题吗？

在IE8中，您提供的代码示例按预期工作-弹出菜单显示在静态菜单的顶部

在Firefox中，除了项目符号位于白色背景之外，情况与此类似，因此它们在静态菜单文本顶部看起来很凌乱