wordpress - 无法更改主菜单上每个元素的边框颜色

Question

我已经为主菜单上的每个按钮设置了 CSS。我想更改每个元素的边框颜色。

我可以随心所欲地改变颜色。但我想为每个按钮挑选一些特定的颜色。

这部分 CSS 定义边框颜色:

#main-nav .menu-sub-content {
display: none;
padding: 0;
position: absolute;
z-index: 205;
border-top: 12px solid ;/*#F88C00*/
border-top-color: transparent !important; /*I change to transparent*/
background: #fff;/*2d2d2d*/
color:#999;
-webkit-box-shadow: 0 3px 4px 1px rgba(0, 0, 0, 0.2);
        box-shadow: 0 3px 4px 1px rgba(0, 0, 0, 0.2);
-webkit-border-bottom-right-radius: 3px;
-webkit-border-bottom-left-radius : 3px;
   -moz-border-radius-bottomright : 3px;
   -moz-border-radius-bottomleft  : 3px;
        border-bottom-right-radius: 3px;
        border-bottom-left-radius : 3px;

}

首先我尝试了这个

border-top-color: transparent !important;

然后我将这个 CSS 用于第 3 个按钮

.ucuncu-nav.menu-sub-content{
/*border-top:12px solid;*/
border-top-color:#669900 !important;
}

但它并没有改变。我现在该如何更改？

Answer 1

您的列表中的元素具有 id，您可以在为悬停时显示的内容添加单独的边框时使用这些 id。试试这个代码:

#menu-item-17:hover .mega-menu-block {
    border-top: 3px solid red !important;
}

#menu-item-7:hover .mega-menu-block {
    border-top: 3px solid green !important;
}

等等，对于你所有的<li>具有不同 ID 的菜单项。 !important规则在这里是一个快速的解决方案，因为某些默认样式已被覆盖。