0

(http://lwis.net/free-css-drop-down-menu/dropdown.simple.linear.html) の修正版を使用して、3 レベル下にあるネストされたリストを作成しました。レベル 1 と 2 は水平で、レベル 3 は垂直です (少なくともそれが計画です)。

第 1 レベルと第 2 レベルは、すべてのブラウザーで期待どおりに機能します。

IE6 では、3 番目のレベルは、その親 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 でのスタイル設定の問題を理解することは問題ではありません。データが表示されるので、最も技術的な観点からは、サイトは機能しており、データを取得できます。

まだ IE6 を使用しているユーザーの 3% を満足させるために、10 年以上前のブラウザーをサポートするための余分な手間と作業は、それだけの価値がありません。ブラウザで検出し、IE6 のユーザーに IE8 へのアップグレードまたは別のブラウザへの切り替えを強く推奨します。

于 2011-07-06T02:32:02.460 に答える