Question

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

我尝试了几种解决方案，但没有一个起作用。

有什么建议吗？

非常感谢您。

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类项目没有边框，请创建一种新样式（该样式应位于层叠规则中的上述规则之后-好像您使用的是WordPress，因此应该放在一个孩子中主题）：

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

如果要在主导航中的ul中包含ul的所有个实例，则可以省略.sub-menu部分。

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

如何更改子菜单框的背景和/或边框？

2 个答案: