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

时间:2018-02-17 12:56:56

标签: css wordpress css3 menuitem

我为主菜单上的每个按钮设置了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;
}

但它没有改变。我现在该怎么改呢?

1 个答案:

答案 0 :(得分:2)

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

 $ xxd file.pcap
 00000000: d4c3 b2a1 ...

等,用于具有不同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>规则是一个快速解决方案,因为某些默认样式会覆盖它。