Question

我正在使用WPML插件翻译我的网站。正如您可以通过单击下面的链接看到的，如果您将鼠标悬停在标志上，则导航下拉列表将继承导航其余部分的类别（白色背景，填充宽度等）。我想使背景透明，以便只显示标志。我试图针对这几种方式，但无济于事。这是我想要使用的CSS。有人可以帮忙吗？

.sub-menu is--forced-placed {
  width: auto;
  background-color: none;
  color: none;
}

链接到我的网站：http://www.wgeil.de

Answer 1

你可以试试下面的css

ul.primary-menu>.menu-item.menu-item-has-children>.sub-menu{
background-color:transparent;
}

Answer 2

好的，另一次尝试：

你的css选择器应该是这样的 .sub-menu.is--forced-placed因为这两个类都在ul元素上。但如果你使用这个选择器它不会工作，因为有另一个css规则覆盖这个。我们必须将ul添加到选择器：ul.sub-menu.is--forced-placed。现在这个选择器将覆盖附加到该元素的其他规则。

另一件事是您的下拉菜单上的min-width规则会影响语言下拉列表以延伸到min-width: 13.75rem;。所以我们也要覆盖它。

最后要说的是，您无法将background-color或color设置为none。你必须使用transparent。

试试这个css并告诉我们这是否有效：

ul.sub-menu.is--forced-placed {
    min-width: auto;
    background-color: transparent;
    color: transparent;
}

Answer 3

通过检查，如果您能找到将background-color: rgba(0,0,0,0);添加到下面的CSS中的方法。你也想删除边框所以你不会得到任何有趣的线条。

ul.primary-menu > .menu-item.menu-item-has-children > .sub-menu {
    border-top: 1px solid rgba(0,0,0,0.075);
    left: 50%;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);  
}

然后它变得透明。可能......也许......

我还在看着宽度，但我也在吃汤，所以我现在有点慢。

Answer 4

这个

ul.primary-menu>.menu-item.menu-item-has-children>.sub-menu{
background-color:transparent !important;
}

!important会覆盖所有规则

.sub-menu is--forced-placed {
  width: auto !important;
  background-color: none !important;
  color: none !important;
}

但我会使用background-color:transparent !important;

的第一个示例background-color:none !important;

从下拉导航元素中删除背景颜色和宽度

4 个答案: