Css 在WordPress中设置单个菜单项的样式

我正在尝试设计我的WordPress菜单。我希望每个菜单项都有不同的颜色，页面和帖子上所有子菜单项的背景颜色必须与父菜单项的文本颜色相同

我想要的是：

- <ul id="main-menu" class="menu">
    <li id="1">This is Red
        <ul>
        <li id="4">Background Red</li> 
        </ul> 
    </li>
    <li id="2">This is Blue
        <ul>
        <li id="5">Background Blue</li> 
        </ul> 
    </li>
    <li id="3">This is Green
        <ul>
        <li id="6">Background Green</li> 
        </ul> 
    </li>
- </ul>

-

这是红色的

背景红色


这是蓝色的

背景蓝


这是绿色的

背景绿色


-

我只在主页上做对了，我想每个页面都是一样的。但在其他页面上，它并没有反映出它想要反映的内容

对于包含“>”的列表的CSS样式，我仍在努力理解——我只是觉得它令人困惑

---

如果有人能给我指点一个好的导师，或者告诉我怎么做，我会非常感激。

我已经为自己解决了这个问题。我需要应用的样式实际上是这样的：

.jqueryslidemenu #menu-item-12 a{color: #6cd7fb !important;}
.jqueryslidemenu #menu-item-12 > ul.sub-menu {border: 1px solid #6cd7fb; border-radius: 10px; background: none repeat scroll 0 0 #6cd7fb !important;-moz-box-shadow: 8px 8px 9px #888888; -webkit-box-shadow: 8px 8px 9px #888888; box-shadow: 8px 8px 9px #888888; }
.jqueryslidemenu #menu-item-12 > ul.sub-menu li a{color:#fff!important; background-color:#6cd7fb !important;}
.jqueryslidemenu #menu-item-12 ul.sub-menu > li a:hover{
background-color:#6cd7fb !important;
border-color: #56c8f5 #65E1F7 #AEEEF9; border-image: none;
border-style: solid;
border-width: 1px;
border-radius: 15px;
box-shadow: 0 -5px 9px #AEEEF9 inset;}

这是我的工作-我知道我必须在造型的颜色多一点。如果有人有更好的解决方案，我洗耳恭听：）

---

显然，这只适用于其中一个菜单项-其他菜单项的id发生更改

如果id不能以数字开头，请在当前使用它时进行更改。如果无法更改，您可以使用

[id='1']{/*一些css*/}

HTML

<ul class="menu">
    <li id="first">This is Red
        <ul>
            <li>Background Red</li> 
        </ul> 
    </li>
    <li id="second">This is Blue
        <ul>
            <li>Background Blue</li> 
        </ul> 
    </li>
    <li id="third">This is Green
        <ul>
            <li>Background Green</li> 
        </ul> 
    </li>
</ul>

它在这里工作

---

希望它能解决您的问题。

刚才我找到了这个问题的答案：） @外观>菜单向上看，然后单击：屏幕选项！ 然后在“显示高级菜单属性”下选中（CSS类） 因此将显示名为CSS类的新字段。每一件物品！ 现在，您可以将从样式表中指定的类作为目标

问候：）

---

客人

这太棒了-谢谢你-我正要来这里再次发布我的解决方案实际上没有那么好用，因为现在我在第三级遇到了一个问题，你的解决方案为我解决了：）如果一个答案解决了你的问题，请将它标记为解决方案，以帮助其他有类似问题的人获得准确答案。并在不同的帖子中提出所有新问题

#first {
    color: red;
}
    #first ul > * {
        background-color: red;
        color: white;
    }
#second {
    color: blue;
}
    #second ul > * {
        background-color: blue;
        color: white;
    }
#third {
    color: green;
}
    #third ul > * {
        background-color: green;
        color: white;
    }