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

Question

我有一个CSS下拉菜单，它在Mozilla/Chrome/Safari中工作得很好。然而，如果IE10 (但有效)但在IE9中根本不起作用，那就有点不确定了。

我试图找出是什么原因造成这一点，因为有网站，使用CSS下拉菜单，功能完美的IE。

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

这些图像如下：

1. 正常菜单(铬)

1. 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"> <--在ul之后有一个额外的r。

jsfiddle似乎不工作在IE8和以下，至少在控制台的浏览器视图。

这是我做的更新的小提琴

小提琴

我建议把这个写得更干净一点，就像这样：

<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;
}

篡改代码