如何更改子菜单框的背景 and/or 边框？

Question

screenshot

我正在我的测试站点上创建一个网站：http://work.jivova.com 现在我一直在寻找一种方法来将子菜单框背景颜色（如屏幕截图所示）更改为半透明，并且还可以选择使用自定义 CSS.

删除框边框

我已经尝试了几种解决方案，none 都有效。

有什么建议吗？

非常感谢。

Answer 1

下次最好在此处添加您的菜单代码，这样如果您的网站发生变化，它也可以帮助其他人。

这里是自定义 CSS，它将使菜单透明并删除边框：

.main-navigation ul ul {
  background: rgba(255, 255, 255, 0.75); /* 0.75 - WHITE */
  border: 0;
}

如果你想改变悬停时的颜色或透明效果，你需要：

.main-navigation li li:hover, .main-navigation li li.focus {
   background: rgba(255, 0, 0, 0.75);  /* 0.75 - RED */
}

如果你想让整个子菜单透明，而不仅仅是你必须添加的背景：

.main-navigation ul ul {
  opacity: .75; /* This is also working for hover or active states */
}

Answer 2

您的主样式表中有一个样式，.main-navigation ul ul 为您的子菜单提供了边框。如果您只希望 sub-menu class 项目没有边框，请创建一个新样式（它应该在级联中的上述规则之后出现——看起来您正在使用 WordPress，所以这应该进入儿童主题):

.main-navigation ul ul.sub-menu {
    border : 0px; 
}

如果你想在主导航中的 ul 中使用 all 个 ul 实例，你可以省略 .sub-menu 部分。

至于背景颜色，我不是很清楚你想做什么——整个盒子的背景，还是改变悬停状态下的灰色背景？如果您指的是样式 .main-navigation li li:hover, .main-navigation li li.focus 添加的灰色背景。您可以使用 documentation on opacity 将该背景灰色的透明度更改为其他内容，并将该新规则也添加到您的子主题中。

如何更改子菜单框的背景 and/or 边框？

How to change background and/or border of the submenu box?

css

wordpress

twentyseventeen