无法更改主菜单上每个项目的边框颜色

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 放在第三个按钮上

.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;
}

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

无法更改主菜单上每个项目的边框颜色

Couldn't change the border color for each item on main menu

css

wordpress

menuitem