在WordPress中设置个别菜单项

问题描述：

我正在尝试设置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样式的名单已在它的“>”我依然在挣扎着理解 - 我只是觉得它混淆。

如果它是如何做有人可以点我一个很好的tuturial或告诉我，我会是最感激。

答

我已经成功地工作，这一点对于我自己，我需要实际应用的造型是这样的：

.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'] {/* 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/

希望它可以解决您的问题。

这真棒 - 谢谢 - 我刚刚来到这里，并再次发布我的解决方案实际上并没有很好的工作，因为现在我有一个问题，第三级和您的解决方案排序出我:) – mommaroodles

如果答案能够解决您的问题，请将其标记为帮助其他遇到类似问题的人员获得准确答案的解决方案。在另一篇帖子中提出所有新问题 –

答

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

问候:) 游客！

在WordPress中设置个别菜单项

相关推荐