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>

我设法只在主页上做到这一点，认为每个页面都是一样的。但在其他页面上，它没有反映出它的意图。

具有'＆gt;'的列表的CSS样式在其中我仍在努力理解 - 我发现它令人困惑。

如果有人能指出我是一个好的tuturial或告诉我它是如何完成的，我会非常感激。

Answer 1

ID不能以数字开头，如果您当前正在使用它，请更改它。如果无法更改，您可以使用[id='1'] {/* some 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

#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

刚才我找到了这个问题的答案:) @外观＆gt;菜单看起来顶部并单击：屏幕选项！然后检查（CSS Classes）：显示高级菜单属性因此将显示名为CSS Classes的新字段。每个项目！现在，您可以在样式表中定位已分配的类。

问候:) 来宾！

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

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

3 个答案: