0

使用 (http://lwis.net/free-css-drop-down-menu/dropdown.simple.linear.html) 的修改版本，我创建了一个嵌套列表，分为 3 个级别。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 |

应该：

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

1 回答 1

0

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

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

于 2011-07-06T02:32:02.460 回答