1

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

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

4

3 回答 3

2

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/

希望它能解决你的问题。

于 2013-09-29T12:30:31.653 回答
1

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

问候：）客人！

于 2014-01-31T20:38:04.730 回答
0

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

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

于 2013-09-29T10:51:17.897 回答