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」では、「display: block」と「clear: both;」が必要になる場合があります。より大きな領域は、フローティングの問題です。

于 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 に答える