WordPress TwentyTwelve自定义菜单当前菜单项样式

我试图在一个儿童主题的侧栏中设计自定义菜单 WordPress'TwentyTwelve主题。
我想给当前的菜单项灰色背景。
不幸的是，“父”菜单项以某种方式将背景色赋予比仅当前li菜单项宽得多的区域。

我现在使用这个CSS代码：WordPress TwentyTwelve自定义菜单当前菜单项样式

.current-menu-item {background-color:#666!important;color:#ff0000!important;font-weight:bold;} 
.menu li:not(.current-menu-item) {color:#fff!important;background-color:#333!important;}

举个例子/说明我的意思：我想完成它http://populair.eu，看到头版的菜单项“populair”也在上面的图像周围给出灰色背景。子菜单项是可以的。

奇怪的是，它在我的本地主机上运行正常。

我的感觉是，如果在<旁边有一个<旁边>它会被解决，但不知何故，我可能会失去一些东西。

有没有人有这方面的经验？ /它应该怎样样式？

来源

2013-01-08 edelwater

您必须使用“.current-menu-item a”来为锚链接提供背景，而不是给列表项目。 – rafaelbiten

@ 7th ach ..是的，就是这样！（需要等待6分钟才能接受答案） – edelwater

好的，你也可以对你的代码做一些“清理”......就在你的“.menu li a”里面，你有两条或三条规则，你并没有真正使用：“align：right”就是其中之一。 “list-style-type：none;”甚至不应该在那里，因为它是一个锚链接，而不是“列表”。 – rafaelbiten

您必须使用“.current-menu-item a”来为锚链接提供背景，而不是链接到列表项目。另外，在你的“.menu li a”你可能不得不“显示：block”和“clear：both;”。面积较大是一个浮动问题。

来源

2013-01-08 21:52:40 rafaelbiten

嗯，如果我使用.current-menu-item一个完整的子树获取背景颜色 – edelwater

@edelwater你如何看待它？ – gSaenz

仔细检查您正在使用的课程。你必须测试才能找到合适的。还有一个“.current_page_item”，你可以尝试。或者使用诸如“.current-menu-item> a”之类的东西。 – rafaelbiten

要做的最好的事情是使用Google Chrome的检测元素软件或使用Firefox's firebug并选择该项目，而使用其中任何一项都可以实时更改CSS代码。这意味着当你看着你想要改变的位时，你可以改变代码，它会以你能看到的方式反映出来，然而你需要在你的子主题的style.css文件中做出这些改变。

看看目前在我的网站www.driftedmass.co.uk上的菜单，如果那是您正在寻找的那种东西，然后通过我的网站上的联系表单与我联系。

如果你是想搞垮菜单，你可能需要做这样的事情的大小（是的<<<<这是你所需要的位）：

.main-navigation ul.nav-menu, 
    .main-navigation div.nav-menu > ul { 
     border-bottom: 1px solid #ededed; 
     border-top: 1px solid #ededed; 
    >>>> display: inline !important;   <<<<<<<< 
     text-align: center; 
     width: 100%; 
       background: transparent; 
       border-color: #ff0000; 
    } 
    .main-navigation ul { 
     margin: 0; 
     text-indent: 0; 
     background-color: #ffffff; 
    } 
     .main-navigation li a, 
    .main-navigation li { 
     display: inline-block; 
     text-decoration: none; 
    }

与箭头位将有最初看起来是这样的：

display: inline-block !important;

我希望这种帮助你有点。

来源

2013-03-24 01:22:51 user2203618

这并没有真正解决这个问题，再加上我不认为这是一个好主意，当我们通过另一种媒体获得解决方案时，试图在堆栈溢出时解决它。 – awbergs

WordPress TwentyTwelve自定义菜单当前菜单项样式

回答

相关问题