IE7、8 和 9 中的 CSS 下拉菜单功能错误

Question

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

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

小提琴请看这里：http://jsfiddle.net/xZuDC/

图片如下：

1. chrome 中的普通菜单

2. 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">

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