0

私はcssが初めてで、クラスを箇条書きでターゲットにする方法を教えてもらえますか?

html は次のとおりです。

<li><a href="#" class="drop"><strong>PRACTICE AREAS</strong></a>
    <div class="dropdown_1column align_right" style="left: 4px;">
        <div class="col_1">
        <ul>
            <li class="bullets"><a href="#">Employment Law</a></li>
            <li class="bullets"><a href="#">Civil Rights</a></li>
        </ul>  
    </div></div>
</li>

これが私が書いたcssです：

#menu li.bullets {
    font-family: 'Tinos', serif;
    font-size:12px;
    color:#531517;
    background:url("../images/menubar/arrow_off.png") no-repeat;
    padding-left:15px;
    background-position: 0px 9px;
}

#menu li.bullets:hover {
    color:black;
    background-image: url(../images/menubar/arrow_on.png);
    background-repeat: no-repeat;
    background-position: 0px 9px;
}

私は .bullets というクラスを作成しようとしていますが、それを有効にしたいです

<li class="bullets"><a href="#">Employment Law</a></li>

ロールオーバーのオン/オフとして、矢印画像のオン/オフを表示します。誰かが私が間違っていることを教えてもらえますか?

PS: もっと見る必要がある場合は、ここでサイトをライブで見つけることができます: http://gdisinc.com/barker/default.php

4

3 に答える 3

1

CSS によると、li.bullets クラスは ID が の要素の子孫でなければなりませんmenu。囲んでいる divに追加するか、CSS 指定子から をid="menu"削除する必要があります。#menu

于 2012-08-31T00:25:36.393 に答える
0

リストしたサイトを見ると、<li>タグが<ul>ID「menu」の下にネストされているように見えます。ただし、ライブサイトでは、liタグに「bullets」クラスがないようです。

<li>そのCSSは、IDが「menu」のオブジェクトの下のどこかにネストされているクラス「bullets」のタグに適用されます。

例えば：

<div id="menu">
  <ul>
    <li class="bullets">This will be affected</li>
    <li>This won't be</li>
  </ul>
</div>

また

<div>
  <ul id="menu">
    <li class="bullet">This will be affected</li>
  </ul>
  <ul>
    <li class="bullet">This won't be</li>
  </ul>
</div>

とはいえ、外観に関連するクラス名（箇条書きなど）は使用しないでください。cssの全体的なポイントは、デザインをコンテンツから分離することです。そのため、クラス名を機能的にする必要があります（例： "menuItem"）

于 2012-08-31T00:30:32.410 に答える
0

これは、CSSの後半（行：371）で参照しているためです。

#menu li ul li:hover {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
}

これはCSSを上書きしています。

セレクターを次のように変更します。

#menu li ul li.bullets:hover
于 2012-08-31T00:34:50.943 に答える