0

我有一个在 Mozilla/Chrome/Safari 中完美运行的 CSS 下拉菜单。但是，如果IE10（但有效）但在IE9.

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

请在此处查看小提琴：http: //jsfiddle.net/xZuDC/

图片如下：

  1. chrome中的普通菜单

    Chrome 中的菜单

  2. IE中的菜单

    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>
4

1 回答 1

0

我做了一些更改，据我所知，它适用于 IE9。

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

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

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

小提琴

我建议把这个写得更干净一点：

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

拨弄代码

于 2013-10-03T18:18:42.927 回答