0

問題は、親カテゴリにカーソルを合わせるまでネストされたサブカテゴリを非表示にする必要があることですが、メインの親カテゴリにカーソルを合わせると、すべてのサブカテゴリとサブサブカテゴリが表示されます。

この問題を修正して、親のサブカテゴリのみが表示され、サブカテゴリのサブサブカテゴリにカーソルを合わせるまで表示されないようにするにはどうすればよいですか？

これがCSSです。

#nav-container ul.cat-container ol ol ol ol li a {
    visibility: hidden;
    height: 0;
    display: none;
}

#nav-container ul.cat-container ol ol ol li a {
    visibility: hidden;
    height: 0;
    display: none;
}

#nav-container ul.cat-container ol ol li a {
    visibility: hidden;
    height: 0;
    display: none;
}

#nav-container ul.cat-container ol li {
    visibility: hidden;
    height: 0;
    display: none;
}

#nav-container ul.cat-container ol ol ol li:hover ol li a {
    visibility: visible;
    height: auto;
    display: block;
}

#nav-container ul.cat-container ol ol li:hover ol li a {
    visibility: visible;
    height: auto;
    display: block;
}

#nav-container ul.cat-container ol li:hover ol li a {
    visibility: visible;
    height: auto;
    display: block;
}

#nav-container ul.cat-container li.cat-header:hover ol li {
    visibility: visible;
    height: auto;
    display: block;
}

これがHTMLです。

  <div id="nav-container">
    <ol>
      <li>
        <ul class="cat-container">
          <li class="cat-header">
            <h2><a href="#"class="header">First Nested List</a></h2>
            <ol>
              <li><a href="#">Second Nested List</a></li>
              <li><a href="#">Second Nested List</a></li>
            </ol>
          </li>
          <li class="cat-header">
            <h2><a href="#" class="header">First Nested List</a></h2>
            <ol>
              <li><a href="#">Second Nested List</a></li>
              <li><a href="#">Second Nested List</a></li>
            </ol>
          </li>
          <li class="cat-header">
            <h2><a href="#" class="header">First Nested List</a></h2>
            <ol>
              <li><a href="#">Second Nested List</a></li>
              <li><a href="#">Second Nested List</a>
                <ol>
                  <li><a href="#">Third Nested List</a></li>
                  <li><a href="#">Third Nested List</a>
                    <ol>
                      <li><a href="#">Fourth Nested List</a></li>
                      <li><a href="#">Fourth Nested List</a></li>
                    </ol>
                  </li>
                  <li><a href="#">Third Nested List</a>
                    <ol>
                      <li><a href="#">Fourth Nested List</a>
                        <ol>
                          <li><a href="#">Fifth Nested List</a></li>
                          <li><a href="#">Fifth Nested List</a></li>
                        </ol>
                      </li>
                      <li><a href="#">Fourth Nested List</a></li>
                    </ol>
                  </li>
                  <li><a href="#">Third Nested List</a></li>
                </ol>
              </li>
              <li><a href="#">Second Nested List</a></li>
            </ol>
          </li>
        </ul>
      </li>
    </ol>
  </div>
4

2 に答える 2

2

CSSに必要なものは次のとおりです。

ul.cat-container li {
    display:  none;
}
ul.cat-container > li {
    display: list-item;
}
ul.cat-container li:hover > ol > li {
    display: list-item;
}

長いセレクターなどをいじる必要はないと思います。上記のスニペットは、ユースケースをかなりうまくカバーしているはずです。

子セレクター（>）は、IE6以下を除くすべての場所で機能します。最近、これらのブラウザをサポートしていないことを願っています。

于 2011-07-12T06:41:11.257 に答える
2

@kei私の問題の解決策はありますか？

そうですね..ソリューションにIE6-サポートが含まれておらず、ホバー時に直接の子のみを表示するという問題のみが含まれていると仮定すると、はい、解決策があるかもしれません。

>cssに表示されているように挿入します

#nav-container ul.cat-container ol ol ol li:hover > ol > li > a 

#nav-container ul.cat-container ol ol li:hover > ol > li > a 

#nav-container ul.cat-container ol li:hover > ol > li > a

フィドル： http： //jsfiddle.net/3sYCG/

于 2011-07-12T06:24:45.643 に答える