0
  1. 我正在尝试在 WordPress 的 TwentyTwelve 主题的子主题的侧边栏中设置自定义菜单的样式。
  2. 我正在尝试为当前菜单项提供灰色背景。
  3. 不幸的是，“父”菜单项以某种方式将背景颜色赋予了比仅当前 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”也在上面的图像周围给出了灰色背景。子菜单项还可以。

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

我有一种感觉，如果在 <asides> 之间有一个 <br />，它会得到解决，但不知何故我可能会遗漏一些东西。

有没有人有这方面的经验？/ 应该如何设计？

4

2 回答 2

1

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

于 2013-01-08T21:52:40.980 回答
0

最好的办法是使用 Google Chrome 的检查元素软件或使用Firefox 的 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-24T01:22:51.043 回答