0

ホバー「ドロップダウンメニュー」のメニューにコンテンツを含むボックスを追加しようとすると、次のようになります。


（出典：gyazo.com）

カテゴリメニュー項目にカーソルを合わせると、ドロップダウンがポップアップするようにします。

これは私がそれに使用したコードです：

       <div class="secondheader">

      <div class="container">

               <div class="span12">

                          <ul class="nav6">

                          <li><a href="#">Home</a></li>

                          <li class="dropdown1"><a href="#">Categories</a> </li>

                          <li><a href="#">Buy</a></li>

                          <li><a href="#">Sell</a></li>

                          <li><a href="#">Forums</a></li>

                          <li><a href="#">Contact</a></li>

                          <li><a href="#">item 1</a></li>

                          <li><a href="#">Forums</a></li>

                          <li><a href="#">Contact</a></li>

                          <li><a href="#">item 1</a></li>

                          </ul>

                          </div>

               </div>

       </div>

</div>

CSS:

.secondheader {
background-image: url("../img/second.png");
width: 100%;
height: 66px;
border-bottom: solid 6px #f0e8ce;
}    

.nav6  {
list-style: none;
font-family: 'Dosis', sans-serif;
float: left
font-size: 20px;
margin-top: 13px;
margin-left: -35px;
}

.nav6  li {
display: inline;
margin: 0px;
font-size: 18px;
font-family: 'Dosis', sans-serif;
float: left;
margin-top: 10px;
}

.nav6 a {
color: #7d7253;
padding-top: 20px;
padding-bottom: 20px;
padding-left: 20px;
padding-right: 20px;
}

.nav6 a:hover {
background-image: url("../img/hoverbg.png");
color: #53410f;
text-decoration: none;
}

チュートリアルを使用してみましたが、レイアウトに同じものを作成する方法がよくわかりません。つまり、方法とクラスが異なるということです。

4

2 に答える 2

0

http://jsfiddle.net/b76Qc/のようなものが欲しいですか?

編集：

あなたの場合、子セレクターの代わりに子孫セレクターを使用するため、サブメニューは水平です。

.nav6 liと置き換えます.nav6>li_.nav6 li ul.nav6>li>ul

完全なコードが必要な場合は、私の jsfiddle を参照してください。

編集2：

各要素に異なる背景を持たせたい場合は、

<li class="dropdown1"><a href="#">Categories</a>
    <ul>
        <li style="background:red"><a href="#">Buy</a></li>
        <li style="background:blue"><a href="#">Sell</a></li>
        <li style="background:green"><a href="#">Forums</a></li>
        ...
    </ul>
</li>

しかし、画像の代わりにあなたのサイトへのリンクを提供できますか? http://gyazo.com/35835f003d0d8b776248196632cc1d4a.pngに示されている四角形が変ですが、画像だけでは何が起こっているのかわかりません...

編集3：

あなたは変わらなければならない

.nav6 a {
    color: #7D7253;
    padding: 20px;
}

の中へ

.nav6>li>a {
    padding: 20px;
}
.nav6 a {
    color: #7D7253;
}

と

.nav6 a:hover {
    background-image: url("../img/hoverbg.png");
    color: #53410F;
    text-decoration: none;
}

の中へ

.nav6 a:hover {
    color: #53410F;
    text-decoration: none;
}
.nav6 > li > a:hover {
    background-image: url("../img/hoverbg.png");
}

編集4：

申し訳ありませんが、セレクターを>で使用するように言った理由を説明していませんでした。

あなたのhtmlは次のようなものです：

<ul class="nav6">
    <li><a href="#">Home</a></li>
    <li class="dropdown1"><a href="#">Categories</a>
        <ul>
            <li><a href="#">Buy</a></li>
            <li><a href="#">Sell</a></li>
            <li><a href="#">Forums</a></li>
            <li><a href="#">Contact</a></li>
            <li><a href="#">item 1</a></li>
            <li><a href="#">Forums</a></li>
            <li><a href="#">Contact</a></li>
            <li><a href="#">item 1</a></li>
        </ul>
    </li>
</ul>

を使用すると、スタイルは内.nav6 aのすべてに適用されます。それが子孫セレクターです。<a>.nav6

次に、これはメニューのリンクとサブメニューのリンクの両方に適用されます。

<ul class="nav6">

<li><a href="#">Home</a></li>

<li class="dropdown1"><a href="#">Categories</a>

<ul>

<li><a href="#">Buy</a></li>

<li><a href="#">Sell</a></li>

...

</ul>

</li>

</ul>

しかし、のような子セレクター.nav6>li>aを使用すると、スタイルは<li>の子である の子である.nav6リンク (メニューのリンクのみ) にのみ適用されます。このようにして、すべてのリンクに適用するスタイルと、メニューのリンクに適用するスタイルを設定できます。

<ul class="nav6">

<li><a href="#">Home</a></li>

<li class="dropdown1"><a href="#">Categories</a>

<ul>

<li><a href="#">Buy</a></li>

<li><a href="#">Sell</a></li>

...

</ul>

</li>

</ul>

編集5：

背景の問題を解決するには、

変化する

.nav6 a:hover {
    color: #53410F;
    text-decoration: none;
}

に

.nav6>li:hover>a, .nav6 .dropdown1 li:hover>a {
    color: #53410F;
    text-decoration: none;
}

と

.nav6 > li > a:hover
    background-image: url("../img/hoverbg.png");
}

に

.nav6>li:hover>a {
    background-image: url("../img/hoverbg.png");
}
于 2012-08-19T16:08:09.970 に答える
0

この作業を行うために実際に必要なコードがどれほど少ないかを示すために、ここに小さな例を設定します: http://jsfiddle.net/fS5WV/

説明をcssに入れました。

重要なのは、メニューを適切にネストし、サブメニューに絶対的な位置を与えて、コンテンツを押し下げないようにすることです。

それが理にかなっていることを願っています。さらに説明が必要な場合はお気軽にお尋ねください。

于 2012-08-19T16:27:04.243 に答える