下拉菜單對齊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-->