Question

我的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 Fix代码一样：

#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>

Answer 1

这取决于其他元素是什么以及围绕此div块的其余DOM元素。

如果它是一个flash元素，那么你可能需要使用Javascript来保持该flash元素不会隐藏CSS下拉。

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

抱歉，很难更具体。我复制了你的代码，制作了一个快速的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 中的问题吗？

Answer 2

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

在Firefox中，它是一个类似的故事，只是子弹在白色背景之外，因此它们在静态菜单文本之上看起来很乱。

IE 7/8 CSS菜单问题

2 个答案: