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. 您应该添加id="menu"到封闭的 div 或#menu从 CSS 说明符中删除 。

于 2012-08-31T00:25:36.393 回答
0

<li>查看您列出的站点，您的标签看起来像是嵌套在<ul>带有 id 的“菜单”下。然而，在现场网站上，li 标签似乎没有“子弹”类

该 CSS 将应用于任何<li>嵌套在 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 回答