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中找出样式问题甚至不应该成为一个问题。数据显示出来，因此从最技术的角度来看，网站正在运行并且可以检索数据。

支持10年以上的浏览器以满足仍使用IE6的3％用户的额外麻烦和工作是不值得的。浏览器检测并强烈推荐IE6用户升级到IE8或切换到另一个浏览器。

IE CSS嵌套水平列表位置

1 个答案: