0

WordPressのビルドに使用するために、「重複するタブ」と呼ばれるこのチュートリアルに従いました。それは本当にいいですし、うまく機能します。 http://www.codealamode.net/overlapping-tabs

ただし、チュートリアルとは異なり、ドロップダウン サブメニューを追加しました。cssに繰り返しがないにもかかわらず、何らかの理由でメインの親の背景タブがサブメニューに引き継がれていることを除いて、それらもうまく機能します。

私はデモを探して、css で物事を切り替えようとしましたが、混乱しています。

ここにCSSがあります。メインの親のようにサブメニューに背景画像を持たせたくありません。CSS は、リンク名の長さに対応するために幅が「拡張」されるエンドキャップと背景画像をタブに持たせるのが難しいです。

コード: (これですべてではありませんが、背景画像がどこにあるかを示し、サブメニューも表示するには十分です)

.menu ul {
list-style: none;
position: relative;
float: right;
}

.menu ul li {
float: left;
background: url(../wp-content/uploads/2012/08/inactive_right.png) no-repeat right;
padding: 11px 54px 12px 0;
}

.menu ul li:hover > ul {
display: block;
}

.menu ul li a:hover {
color: red;
}

.menu ul ul {
display: none;
position: absolute;
z-index:999; 
background-color: white;
white-space: nowrap;
}

.menu ul li:last-child ul {
right:0;
}

.menu ul ul li {
clear: both;
padding: 5px;
}

.menu ul ul li a:hover {
color: blue;
}

問題の画像 - サブメニューにもエンドキャップがどのように表示されるかを確認しますか? 私はすべてを試しましたが、ul ul li ではなく Ul li に具体的に関連付けられているのに、なぜそこに表示されるのかわかりません。

メニューの問題 http://glassdoctordenvermetro.com/wp-content/themes/GDDenverTheme/images/menu_problem.jpg

4

1 に答える 1

2

.menu (.menu ul li) 内のすべてのリスト項目に背景を設定しています。サブメニューはリスト項目を使用しており、.menu 内にあるため、スタイルも適用されます。直接の子セレクターを使用して、最初のレベルのみをキャッチします。

.menu > ul > li {
    ...
}
于 2012-08-14T07:24:17.653 に答える