0

我正在使用带有 Zen 主题的 Drupal 7。我想在导航栏中添加一个具有以下要求的菜单： 1. 背景：灰色 2. 分隔符“|” 划分每个菜单项 3. 菜单项没有下划线

我能够在 navigation.css 文件中完成#1。你能告诉我如何完成2和3吗？ - - - - - - - - - - - - - - - - - - - 答案 - - - - - -------------------------

对于那些感兴趣的人，这是我完成上述任务的方法：

  1. 将背景设置为灰色，编辑 responsive-sidebars.css，在#navigation 代码块下添加“背景：灰色”。

  2. 添加分隔符“|”：编辑navigation.css，添加以下代码：

    #navigation li:before {
    content: "|";
 }

  3. 菜单项没有下划线，编辑navigation.css，将“text-decoration:none”和#navigation a 添加到“#navigation ul.links li”代码堆中，如下所示：

    #navigation ul.links li,
#navigation ul.menu li,
#navigation a
{ 

  padding: 0px 5px;
  margin-right: 5px;
  border-radius: 5px 5px 5px 5px;
  float:left;
  color:white;
  vertical-align: middle;
  list-style: none;
  text-decoration: none;
}
4

1 回答 1

1

在你正在使用的元素（FOO）上添加一个样式怎么样：

FOO:before {
    content: "|";
}
FOO:first-child:before {
    content: "";
}

FOO 是您为导航使用的类或元素。

这里发生的事情是您使用伪元素将管道放置在元素之前，并且第一个孩子在那里确保您没有在第一个项目前面放置管道。（相反，使用 :after 和 :last-child 将同样有效）

于 2012-10-02T20:56:25.733 回答