下拉菜单对齐IE

Question

很抱歉，如果这已经被问到，但我找不到解决我问题的答案。我创建了一个下拉菜单，它可以在除 IE 之外的所有浏览器中正常工作。我为菜单 li 项添加了宽度，以便它们填充页面的宽度。这使得子菜单在 IE 中无法正确浮动 - 而不是直接浮动在 ul 项目下方，它浮动在下方但向右。如果我删除菜单 li 的宽度，它可以正常工作，但我需要这个，否则菜单只会在左侧聚集。

提前谢谢你

这是我的 HTML：

<ul class="menu">
    <li><a href="/index.php">Home</a></li>
    <li><a href="/page1.php">Page 1</a>
        <ul>
            <li><a href="#">Sub Page</a></li>
            <li><a href="#">Sub Page</a></li>
            <li><a href="#">Sub Page</a></li>
        </ul>
    </li>
    <li><a href="/page2.php">Page 2</a></li>
    <li><a href="/page3.php">Page 3</a></li>
  </ul><!--menu-->

还有我的css：

/*----- Drop down menu styling -----*/

.menu { 
  margin:0; 
  padding:0; 
 }
.menu li { 
  list-style:none; 
  float:left; 
  font:0.9em Arial, Helvetica, sans-serif; 
  color: #fff; 
  text-align: center; 
  width: 240px; 
 }
.menu li a:link, .menu li a:visited { 
  display:block; 
  text-decoration:none; 
  background-color: #88cb78; 
  padding: 0.5em 2em; 
  margin:0; 
  border-right: 1px solid #fff; 
  color:#fff; 
 }
.menu li a:hover { 
  background-color:#a8db9b; 
 }

/*----- sub menu styling -----*/
.menu li ul {
  font:0.9em Arial, Helvetica, sans-serif; 
  position:absolute; 
  float: left; 
  visibility:hidden; 
  border-top:1px solid #fff; 
  margin:0; 
  padding:0; 
  background-color: #88cb78; 
 }
.menu li ul li { 
  display:inline; 
  float:none; 
 }
.menu li ul li a:link, .menu li ul li a:visited { 
  background-color: #88cb78; 
  width:auto; 
 }
.menu li ul li a:hover { 
  background-color:#a8db9b; 
 }

Answer 1

试试这个例子。

.menu {
  margin: 0;
  padding: 0;
}
.menu li {
  list-style: none;
  float: left;
  font: 0.9em Arial, Helvetica, sans-serif;
  color: #fff;
  text-align: center;
  width: 240px;
  position: relative;
}
.menu li a:link,
.menu li a:visited {
  display: block;
  text-decoration: none;
  background-color: #88cb78;
  padding: 0.5em 2em;
  margin: 0;
  border-right: 1px solid #fff;
  color: #fff;
}
.menu li a:hover {
  background-color: #a8db9b;
}
/*----- sub menu styling -----*/

.menu li ul {
  font: 0.9em Arial, Helvetica, sans-serif;
  position: absolute;
  border-top: 1px solid #fff;
  padding: 0;
  background-color: #88cb78;
  width: 100%;
  display: none;
}
.menu li:hover ul {
  display: block;
}
.menu li ul li {
  display: inline;
  float: none;
}
.menu li ul li a:link,
.menu li ul li a:visited {
  background-color: #88cb78;
  width: auto;
}
.menu li ul li a:hover {
  background-color: #a8db9b;
}

<ul class="menu">
  <li><a href="/index.php">Home</a>
  </li>
  <li><a href="/page1.php">Page 1</a>
    <ul>
      <li><a href="#">Sub Page</a>
      </li>
      <li><a href="#">Sub Page</a>
      </li>
      <li><a href="#">Sub Page</a>
      </li>
    </ul>
  </li>
  <li><a href="/page2.php">Page 2</a>
  </li>
  <li><a href="/page3.php">Page 3</a>
  </li>
</ul>
<!--menu-->