IE CSS 嵌套水平列表位置

Question

使用 (http://lwis.net/free-css-drop-down-menu/dropdown.simple.linear.html) 的修改版本，我创建了一个向下 3 层的嵌套列表。 第 1 级和第 2 级是水平的，第 3 级是垂直的（至少这是计划）

第一级和第二级在所有浏览器中都按预期工作。

在 IE6 中，第三级从其父级 LI 的末尾开始，而不是直接在其下方。

EG：

| Item 1 | Item 2 | Item 3 |
| Item 2.1 | Item 2.2 | Item 2.3 |
                      | Item 2.2.1 |
                      | Item 2.2.2 |

应该是：

| Item 1 | Item 2 | Item 3 |
| Item 2.1 | Item 2.2 | Item 2.3 |
           | Item 2.2.1 |
           | Item 2.2.2 |

当我去酒吧时，任何对此的帮助都会受到衷心的感谢和举起的玻璃杯;)

下面的所有代码

jQuery

$(document).ready(function(){

    if($("ul.dropdown").length) {
        $("ul.dropdown li").dropdown();
    }

});

$.fn.dropdown = function() {

    return this.each(function() {

        $(this).hover(function(){
            $(this).addClass("hover");
            $('> .dir',this).addClass("open");
            $('ul:first',this).css('visibility', 'visible');
        },function(){
            $(this).removeClass("hover");
            $('.open',this).removeClass("open");
            $('ul:first',this).css('visibility', 'hidden');
        });

    });

}

CSS

ul.dropdown {
    width: 1003px;
    background-color: #ccc;
    border: solid 1px #999;
    position: relative;
    height: 30px;
}
ul.dropdown, ul.dropdown li, ul.dropdown ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
ul.dropdown li {
    display: inline;
    padding: 5px;
    float: left;
    line-height: 1.3em;
    vertical-align: middle;
}
ul.dropdown li :hover {
    color: #000;
    background-color: #ddd;
}
ul.dropdown li:hover > ul {
    visibility:visible;
}
ul.dropdown li a {
    text-decoration: none;
    background-color: #dde;
}
ul.dropdown ul {
    visibility: hidden;
    position: absolute;
    top: 100%;
    left: -1px;
    z-index: 598;
    width: 1003px;
    display: inline-block;
    background-color: #ccc;
    border: solid 1px #999;
}
ul.dropdown ul ul{
    width: auto;
    margin: 0 0 0 -10px;
    border-top: solid 1px #CCC;
    background-color: #F6F6F6;
    position: absolute;
    left: auto;
}
ul.dropdown ul ul li {
    white-space: nowrap;
    display: inline-block;
}

<强>HTML

<ul class="dropdown">
  <li><a href="#">Item 1</a>
    <ul>
      <li><a href="#">Item 1.1</a></li>
      <li><a href="#">Item 1.2</a></li>
    </ul>
  </li>
  <li><a href="#">Item 2</a>
    <ul>
      <li><a href="#">Item 2.1</a></li>
      <li><a href="#">Item 2.2</a>
        <ul>
          <li><a href="#">Item 2.2.1</a>
          <li><a href="#">Item 2.2.2</a>
        </ul>
      </li>
      <li><a href="#">Item 2.3</a></li>
    </ul>
  </li>
  <li><a href="#">Item 3</a>
    <ul>
      <li><a href="#">Item 3.1</a></li>
      <li><a href="#">Item 3.2</a></li>
    </ul>
  </li>
</ul>

Answer 1

事实上，解决 IE6 中的样式问题甚至不应该是一个问题。数据显示出来，因此从最技术的角度来看，该网站正在运行并且可以检索数据。

为了满足仍然使用 IE6 的 3% 用户的需求，为了支持 10 多年的旧浏览器而付出额外的麻烦和工作是不值得的。浏览器会检测并强烈建议 IE6 用户升级到 IE8 或切换到其他浏览器。