html - 菜单的样式下拉部分

Question

我有一个关于我的造型的简短问题。我正在尝试使用 CSS 设置下拉菜单的样式。

因此，当我更改“主”菜单项的背景图像时，下拉部分也会采用相同的样式。我认为只获得“下拉”部分应该很容易。但是我在我的代码中使用了什么？

它需要有边距和固定宽度以及与主菜单条目不同的背景。

元素的主要选择器是“#access a”。

希望我已经解释清楚了!

提前感谢您的反馈。

HTML

<a href="http://wattel.nl/?page_id=13">Motor</a>
<ul class="sub-menu">
   <li id="menu-item-46" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-46">
       <a href="http://wattel.nl/?page_id=29">Algemeen</a>
    </li>
</ul>

这只是一个基本的 wordpress 菜单。菜单由这个 CSS 设计:

#access a {
  background-image: url('images/menubg.png');
  min-width: 200px;
  font-family: trebuchet MS;
  text-align: center;
  font-size: 24px;
  line-height: 32px;
  color: #fff;
  text-transform: none;
  height: 44px;
}

所以现在二级菜单项也有 menubg.png，我希望它们是不同的样式。

Answer 1

在 CSS 中使用 > 运算符

#access > a {
    background-image: url('images/menubg.png');
}

它只会为直接 <a> 设置样式#access 的子标签菜单，而不是其他菜单。