0

http://jsfiddle.net/hozey/9dGuc/の css にサブメニューを追加しようとしていますが、うまくいかないようです。誰かこの初心者を助けてくれませんか? ここにhtmlがあります。馬1、2、3のサブメニューを作りたいです。

<div class="menu">
<ul>
<!--begin to insert contents-->
<li class="item-first"><a href="http://www.lawsart.com" target="_top">Home</a></li>
<li><a class="current">Portfolio &#9660;</a>
<ul>
<li><a href="http://www.lawsart.com/Horses1.html" target="_top">Horses 1</a></li>
<li><a href="http://www.lawsart.com/Horses2.html" target="_top">Horses 2</a></li>
<li><a href="http://www.lawsart.com/Horses3.html" target="_top">Horses 3</a></li>
<li><a href="http://www.lawsart.com/Dogs.html" target="_top">Dogs</a></li>
<li><a href="http://www.lawsart.com/People.html" target="_top">People</a></li>
<li><a href="http://www.lawsart.com/Stills.html" target="_top">Stills</a></li>
</ul>
</li>
<li><a href="http://www.lawsart.com/Order.html" target="_top">Order</a></li>
<li><a href="http://www.lawsart.com/Contact.html" target="_top">Contact Me</a></li>
</ul>
</div> <!-- end menu -->

</div>

これまでに取得したcssは次のとおりです。

body {
  margin: 0px;
}
#wrapper {
  border: px solid black;
  margin: 1em auto;
  font-family: Arial,Helvetica,sans-serif;
  width: 760px;
  text-align: left;
  background-color: #cccccc;
  overflow:hidden;
  height:150px;
}

.menu {font-family: arial, sans-serif;width:760px;position:relative;font-size:0.7em; margin:0px auto;}

.menu ul li a {display:block; 
               text-decoration:none; 
               width:97px; 
               height:25px; 
               text-align:center; 
               color:white; 
               padding-left:1x; 
               border:px solid; 
               border-width:0 0px 0px 0; 
               background:; 
               line-height:25px; 
               font-size:1.0em;}

.menu ul {padding:0;margin:0;list-style-type: none; }

.menu ul li {float:left;position:relative;}

.menu ul li ul {visibility:hidden;position:absolute;}

.menu ul li:hover a, .menu ul li a:hover {color:white;background:#3BA110;}

.menu ul li:hover ul, .menu ul li a:hover ul {visibility:visible;left:0;}

.menu ul li:hover ul li a, .menu ul li a:hover ul li a {display:block; 
                                                        background:#444444; 
                                                        color:white; 
                                                        width:97px; 
                                                        padding-left:1px;
                                                        border-right:none;}

.menu ul li:hover ul li a:hover, .menu ul li a:hover ul li a:hover {background:#3BA110;color:white;}
4

1 に答える 1

5

完璧にはほど遠いですが、これで始められます。Zeta が指摘したように、子コンビネータがなければ、深くネストされたメニューを作成するのは難しいだけでなく、悪いコードにもなります。

必要なことは、各セレクターが何をターゲットにしているのかを正確に把握することです。2 番目と 3 番目の層liの動作が異なるようにするため、2 番目のセレクターが 3 番目の層にも影響を与えないようにする必要があります。

あなたの問題を解決するために文字通り私がしたことは、あなたがすでに持っていたコードのいたるところに子コンビネーターを適用することでした. その後、第 3 層のアイテムを対象とする単純なセレクターを追加し、機能するメニューを用意しました。

私があなただったら、あなたのコードを見直して、セレクターが何をターゲットにしているのかを正確に把握してから、CSS を書き直します。実行するのはそれほど難しくなく、非常に複雑なネストされたメニューのコードは驚くほど少なくなります。

html (第 3 層のメニュー項目のみ)

...
<!-- the rest of the menu -->
  <li>
    <a href="http://www.lawsart.com/Horses1.html" target="_top">Horses 1</a>
    <ul>
      <li>Submenu1</li>
      <li>Submenu2</li>
    </ul>
  </li>
<!-- the rest of the menu -->
...

css (第 3 層のみ)

.menu ul ul ul { visibility: hidden; position: absolute; top: 0; left: 97px; }
.menu ul ul li:hover ul { visibility: visible; background-color: #eee; }

また、さまざまなティア メニューとアイテムを選択する方法の例をいくつか示します。

css (「ヘッダー項目」をターゲットにするため)

.menu > ul > li { }

css (最初のドロップダウンをターゲットにする)

.menu > ul > li > ul { }

css (最初のドロップダウン項目をターゲットにするため)

.menu > ul > li > ul > li { }
.menu ul ul > li { } /* This will also target submenu items */
.menu > ul > ul > li { }

css (サブメニューをドロップダウン項目に向けるため)

.menu > ul > li > ul > li > ul { }
.menu ul ul ul { }

css (ドロップダウン項目のサブメニュー項目をターゲットにするため)

.menu > ul > li > ul > li > ul > li { }
.menu ul ul ul li { }

上記のコードからわかることは、メニューの最後の層に到達するまで、子コンビネーターの使用をやめたくないということです。一般にmenu ul[n] li、擬似コードを使用してn個のを表している は、メニュー内のn深度よりも深いすべてのliulをターゲットにします。したがって、あなたの場合、3番目の層が最後の層であるため、使用しても問題ありません。ただし、セレクターは 3 番目、4 番目などの深さも対象とするため、最初のドロップダウンのみを対象とするスタイルを記述するために使用することは望ましくありません。.menu ul ul ul li.menu ul ul li

完全を期すために、深くネストされたメニューを機能させるための最低限の方法は、次のように考えることです。

最初のulの後のものはすべて非表示として開始する必要があります。したがって、次のことができます。

.menu ul ul { visibility: hidden; }

これにより、別のul内にネストされたulが非表示になります。したがって、すべてのサブメニューにヒットします。また、メニュー内のリストにのみ適用されます。

次に、親のリンクにカーソルを合わせたときに、各サブメニューが表示されるようにします。すべてのサブメニューを 1 つのセレクターで処理できると思います。

.menu li:hover > ul { visibility: visible; }

これは、メニューのすべてのレベルに適用できる一般的なものです。右から左に読むと、 ul の直接の親であるliにカーソルを合わせると、 ulが表示されます。そして、いつものように、これはメニュー内のリーにのみ適用されます。

もちろん、必要に応じて を使用することもできます。

CSS メニューは、 CSS の効率性について考え、学ぶ絶好の機会です。機能するメニューができたら、それを最適化できるかどうかを確認してください。ここに投稿したタグは最速ではないかもしれません。頭のてっぺんからそれらのことを考えただけです。使用するのに最適なセレクターを見つけるのはあなたに任せます。

これが、複雑にネストされた CSS メニューの基本です。それが役に立てば幸い。

于 2013-01-10T14:32:25.943 に答える