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

Question

我正在尝试设计我的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 样式我仍在努力理解 - 我只是觉得它令人困惑。

如果有人能指出我一个好的学习方法或告诉我它是如何完成的，我会非常伟大。

Answer 1

ID 不能以数字开头，如果您当前正在使用它，请进行更改。如果无法更改它，您可以使用[id='1'] {/* some css */}

该目录

<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的

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

这是在工作 http://jsfiddle.net/9mD8z/

希望它能解决您的问题。

Answer 2

刚才我找到了这个问题的答案：）@外观>菜单顶部并单击：屏幕选项！然后在以下位置选中（CSS 类）：显示高级菜单属性因此将显示名为CSS类的新字段。每件物品！现在，您可以定位从样式表中分配的类。

问候：）客人！

Answer 3

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

.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 会更改