Question

很抱歉，如果已经有人问过，但我找不到解决问题的答案。我创建了一个下拉菜单，除了IE之外，它在所有浏览器中都能正常工作。我在菜单项目中添加了一个宽度，以便它们填充页面的宽度。这使得子菜单在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

试试这个例子。

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

下拉菜单对齐IE

1 个答案: