Question

我正在尝试在儿童主题的侧边栏中设置自定义菜单的样式 WordPress的'TwentyTwelve主题。
我正在尝试将当前菜单项设为灰色背景。
不幸的是，“父”菜单项以某种方式将背景颜色赋予比仅当前li菜单项宽得多的区域。

我现在正在使用这个css代码：

.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”也在上面的图像周围给出了灰色背景。子菜单项没问题。

奇怪的是它在我的localhost上运行正常。

我觉得如果有一个＆lt; br /＆gt;之间＆lt;叠氮化＆GT;它会被解决但不知何故我可能会遗漏一些东西。

有没有人经历过这个？ /它应该如何设计？

Answer 1

您必须使用“.current-menu-item a”来为锚链接提供背景，而不是列表项。另外，在你的“.menu li a”中，你可能需要“显示：阻止”和“清除：两者”。更大的区域是浮动问题。

Answer 2

您要做的最好的事情是使用谷歌浏览器的检查元素软件或使用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;

我希望这会帮助你一点点。

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

2 个答案: