Question

我是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

Answer 1

您的CSS说明您的li.bullets类必须是ID为menu的元素的后代。您应该将id="menu"添加到封闭的div中，或者从CSS说明符中删除#menu。

Answer 2

查看您列出的网站，看起来<li>标记嵌套在<ul>带有ID“菜单下。”但是，在实际网站上，li标签似乎没有类“子弹”

CSS将适用于任何带有“子弹”的<li>标签，该类嵌套在ID为“menu”的对象下的某处

例如：

<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”）

Answer 3

因为你后来在你的CSS（行：371）中引用了

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

覆盖你的CSS。

将您的选择器更改为：

#menu li ul li.bullets:hover

CSS定位李

3 个答案: