Question

我有一个CSS下拉菜单，可以在Mozilla / Chrome / Safari中完美运行。但是如果IE10（但有效）有点不确定但在IE9中根本不起作用。

我试图找出造成这种情况的原因，因为有些网站使用的CSS下拉菜单在IE中完美运行。

图像如下：

Chrome中的普通菜单
IE中的菜单

列表：

<ul class="ulrRight">
    <li><a onclick="your_name">Your Account</a>
        <ul id="your_name">
            <li><a href="/index.php?f=mydetails">Details</a></li>
            <li><a href="/index.php?f=mypassword">Password</a></li>
        </ul>
    </li>
</ul>

Answer 1

我做了一些更改，据我所知它在IE9中有效。

这是我发现的唯一让小提琴不起作用的东西，<ul class="ulrRight">＆lt; ---在ul之后有一个额外的r

jsfiddle在IE 8及以下版本似乎不起作用，至少在控制台的浏览器视图中是这样。

这是我所做的更新的小提琴

fiddle

我建议像这样写一个小清洁器：

<div class="dropDown">
  <ul>
      <li>Your Account
          <ul>
             <li>Details</li>
              <li>Password</li>
          </ul> 
      </li>
      <li>Help
          <ul>
              <li>Support</li>
              <li>Contact Us</li>
              <li>Client FAQ's</li>
              <li>Haulier FAQ's</li>
          </ul>            
      </li>
      <li>Logout</li>
  </ul>
</div>

CSS

.dropDown {
  width: 500px;
  height: 60px;
  margin: 0 auto;
  background: mediumSeaGreen;
}

.dropDown > ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

.dropDown > ul > li {
  float: left;
  width: 33.3333%;
  line-height: 60px;
  text-align: center;
}

.dropDown > ul > li:hover {
  background: #1b1b1b;
  color: #fff;
}

.dropDown > ul > li:hover > ul {
  display: block;
}

.dropDown > ul > li > ul {
  display: none;
  list-style-type: none;
  margin: 0;
  padding: 0;
}

fiddle for code

CSS下拉菜单功能错误在IE7,8＆amp; 9

1 个答案: