0

这是我的下拉菜单代码。在所有浏览器中都可以，但 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 中，主菜单从右到左是级联的。并且子菜单不在主菜单项下的正确位置。

4

1 回答 1

0

http://jsfiddle.net/GMajE/

看一下这个。您需要做的是从以下类中删除 float:right ：

#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 放在子菜单中，然后将 left/right/top/bottom 相应地放在子菜单中。我还没有在小提琴中设置子菜单，所以你知道。

于 2012-09-04T13:03:22.080 回答