IE CSS嵌套水平列表位置

使用修改版本的http://lwis.net/free-css-drop-down-menu/dropdown.simple.linear.html 我已经创建了一个嵌套列表，它可以向下三层。 1层和2层是水平的，3层是垂直的，至少这是平面图

第一级和第二级在所有浏览器中都能正常工作

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

例如：

应该是：

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

在这方面的任何帮助都会在我去酒吧时得到衷心的感谢和举杯庆祝

所有代码如下

jQuery

CSS

HTML

---

真的，在IE6中找出样式问题甚至不应该成为一个问题。数据显示出来了，因此从最技术的角度来看，站点正在运行，并且可以检索数据

---

为了满足3%仍在使用IE6的用户的需求而支持一个10年以上的老浏览器所带来的额外麻烦和工作是不值得的。浏览器检测并强烈推荐IE6用户升级到IE8或切换到其他浏览器。

我为政府工作，因此必须支持IE6，因为我们有10%的用户仍在使用它。

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

$(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');
        });

    });

}

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

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