-2

截屏

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

我尝试了几种解决方案，但都没有奏效。

有什么建议么？

十分感谢。

4

2 回答 2

0

下次最好在此处添加您的菜单代码，这样如果您的网站发生更改，它也会对某人有所帮助。

这是使菜单透明并删除边框的自定义 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 */
}
于 2019-02-08T14:39:15.513 回答
0

您的主样式表中有一个样式，.main-navigation ul ul即为您的子菜单提供边框。如果您只希望sub-menu类项目没有边框，请创建一个新样式（应该在级联中的上述规则之后 - 看起来您正在使用 WordPress，所以这应该放在子主题中）：

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

如果您希望主导航中的 ul 中的所有.sub-menuul 实例，则可以省略该部分。

至于背景颜色，我不太清楚你想要做什么 - 整个盒子的背景，或者改变你在悬停状态下获得的灰色背景？如果您的意思是样式添加的灰色背景.main-navigation li li:hover, .main-navigation li li.focus。您可以使用有关 opacity 的文档将该背景灰色的透明度更改为其他内容，并将该新规则也添加到您的子主题中。

于 2019-02-08T14:44:51.200 回答