Question

IE中的CSS菜单有问题。这是我第一次看到CSS Menus，所以当然会有不幸。 :)它应该显示列表标题下面的列表项，但它显示在右侧。它在Firefox中完美显示，但（当然）不在IE中。

会发生什么（IE）： http://vvcap.net/db/7Ti_aj74IaQjwyX7rk43.htp

但它应该直接在“营销”标题下方显示列表项。

代码：

ul
{

 background:orange;
 height:25px;
 list-style:none;
 margin:0 auto;
 }
li{

  float:left;
  padding:0px;
  }
li a{

  background: url("images/seperator.gif") bottom left no-repeat;
  color:white;
  display:block;
  font-weight:normal;
  line-height:25px;
  text-align:center;
  text-decoration:none;
  }
li a:hover, ul li:hover a{

   background: #2580a2 url('images/seperator.gif') bottom left no-repeat;
   z-index: 1;
   color:#FFFFFF;
   text-decoration:none;
   }
li ul{

  background:#333333;
  display:none;
  height:auto;
  position:absolute;
  width:156px;
  z-index:500;
  }
li:hover ul{

  display:block;
  z-index:1;
  }
li li {

  background:url('images/sub_sep.gif') bottom left no-repeat;
  display:block;
  width:156px;
  }
li:hover li a{

  background:none;
  }
li ul a{

  display:block;
  height:25px;
  font-size:12px;
  font-style:normal;
  padding:0px 10px 0px 15px;
  text-align:left;
  }
li ul a:hover, li ul li:hover a{

   background:#2580a2 url('images/hover_sub.gif') center left no-repeat;
   color:#ffffff;
   text-decoration:none;
   width:131px;
   }

Answer 1

如果没有样本html，我会将你的css（如此处发布的）放在头部的样式标记中。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>test</title>
<style type="text/css">
/* Your CSS */
</style>
</head>
<body>

<table class= "table1" cellpadding="0" cellspacing="0" align ="center">
  <tr>
    <td width = "20%">
      <ul>
         <li><a class ="linkDrop" href="Default.aspx">Home</a>  </li>
      </ul>
    </td>
    <td>
      <ul>
        <li>
          <a class ="linkDrop" href="#">Miscellaneous</a>
          <ul>
            <li><a href="#">Subitem 1</a></li>
            <li><a href="#">Subitem 2</a></li>
            <li><a href="#">Subitem 3</a></li>
          </ul>
        </li>
      </ul>
    </td>
    <td>
      <ul>
        <li>
          <a class ="linkDrop" href="#">Miscellaneous</a>
          <ul>
            <li><a href="#">Subitem 1</a></li>
            <li><a href="#">Subitem 2</a></li>
            <li><a href="#">Subitem 3</a></li>
          </ul>
        </li>
      </ul>
    </td>
  </tr>
</table>

</body>
</html>

一旦我添加了doctype，它工作正常。你有什么机会错过了吗？

- 编辑 -

好吧，我用你从评论中读到的内容更新了上面的代码，并将最后一个td加倍，看看它是否对我有所帮助。

IE7模式下的标准IE8和IE8似乎没问题。但它在怪癖模式或兼容性模式中没有做任何事情。如果它是IE6你遇到了问题，那么问题是：hover psuedo类只有在应用于锚标签（a）时才被IE6选中，因此你的li:hover ul将被忽略。

如果你想在IE6中使用它，你需要添加一些JavaScript。关于ALA的文章非常好：http://www.alistapart.com/articles/horizdropdowns/

IE中的CSS菜单问题

1 个答案: