Question

这是我的下拉菜单代码。它在所有浏览器中都可以，但ie8。我无法理解这个问题。我很高兴知道你的意见。

<ul id="nav" class="nav_wrapper">
  <li id="menu_3">
    <a href="#"> A </a>
    <ul class="sub_menu" id="sub_3" style="display: none">
      <li id="menu_5"><a href="main.php?pages=5"> 1 </a></li>
      <li id="menu_6"><a href="main.php?pages=6"> 2 </a></li>
      <li id="menu_7"><a href="main.php?pages=7"> 3 </a></li>
    </ul>
  </li>

  <li id="menu_18"><a href="main.php?pages=18"> B </a></li>

  <li id="menu_19">
    <a href="#"> C </a>
    <ul class="sub_menu" id="sub_19" style="display: none">
      <li id="menu_20"><a href="main.php?pages=20"> 1 </a></li>
      <li id="menu_21"><a href="main.php?pages=21"> 2 </a></li>
    </ul>
  </li>
</ul>

这是样式表。我删除了一些不必要的样式，如背景和边框，......

.nav_wrapper {
left: 0px;
margin-top: 7px;
padding: 0px;
position: fixed;
right: 0px;
Z-index:10;}

#nav > li { 
display: inline;
float: right;
position: relative;}

li { 
font-family: "tahoma";
font-size: 10pt;
list-style: none outside none;
}

li a {
float: right;
padding: 18px 15px 20px;
text-decoration: none;
}

.sub_menu {
float: right;
line-height: normal;
margin-left: -60px;
margin-top: 55px;
padding: 0px;
position: fixed;
width: 202px;
}

.sub_menu li {
display: inline-block;
text-align: right;
 }

.sub_menu li a {
direction: rtl;
display: inline-block;
line-height: 1;
padding: 10px 10px 10px 0px;
width: 192px;
 }

问题是在ie8中，主菜单从右到左呈现级联。子菜单不在主菜单项下的正确位置。

Answer 1

http://jsfiddle.net/GMajE/

检查一下。您需要做的是从以下类中删除float：

#nav > li { 
display: inline;
float: right;
position: relative;}

您需要将.nav_wrapper类更改为：

.nav_wrapper {
left: 0px;
margin-top: 7px;
padding: 0px;
right: 0px;
Z-index:10;
float:right;}

关于子菜单。您应该将position：relative放在主导航的li中并放置position：absolute然后将左/右/上/下相应地放在子菜单中。我没有在小提琴中设置子菜单，所以你知道。

在ie8中下拉菜单混乱

1 个答案: