0

動作する CSS を中心としたナビゲーション バーを作成しました。各 li アイテムは、背景イメージである境界線で区切られています。ナビゲーション項目にカーソルを合わせると、ホバーが背景を変更するためセパレーターが消えます (私は推測します)が、これを修正するにはどうすればよいのでしょうか。

2 つ目の問題は、サブ メニュー項目が正しく表示されないことです。その理由はわかりません...

デモンストレーション: http://jsfiddle.net/Xenios/tfbhh/9/embedded/result/

コード: http://jsfiddle.net/Xenios/tfbhh/9/

私はこれをほぼ 1 週間機能させようとしていますが、かなり疲れているので、ここでサポートを探しています。

4

2 に答える 2

1

セパレーター

ご存じのように、メイン バー ( nav_container) には背景画像があり、ボタンの外観を構成しています。各ボタンの背景はセパレーターであり、それ以外には何もありません (右側の 10px)。したがって、ホバー背景が表示されるときは、ホバー背景以外の公園であるためです。

これを修正するには、<li>ホバーしない背景を使用して、独自のセパレーターを配置する必要があります。次に、要素をホバーすると、現在のホバー画像に簡単に変更できます。

要素を分離したくない場合は<li>、ボタンごとに個別の全幅画像を作成する必要がありますが、このメニューの作成方法を見ると、これをやりたいとは思えません.

これが実際の例です（最初のいくつかのボタンのみを実行しました）：http://jsfiddle.net/tfbhh/43/

サブメニュー

上で述べたように、コンテナの背景画像を設定しましたが、サブメニュー項目でこれを行っていないため、大きな見た目のボタンがありません。開発者ツールバー (F12) を使用してスタイリングを確認すると、これで問題が解決するはずです。

于 2012-09-15T15:00:18.493 に答える
0

のセパレータの幅に等しい左のパディングを使用してli、の背景のみを変更できaます。class="separator"また、最初のリスト項目を除くすべての項目で使用されていることに気づきました。:first-childこれを疑似セレクターに置き換えることができます。次に、次のようなものが得られます。

li:first-child { padding-left: 0; background: transparent; }
li { padding-left: 3px; background: url(separator.png) no-repeat; }
li a { line-height: 40px; padding: 0 15px; }
li a:hover { background: url(anchor-hover.png) repeat-x; }

編集：上記のCSSは、このソリューションのコアスタイリングをカバーしています。これが実際の例です（背景色を使用）：

http://jsfiddle.net/haa5X/3/

完全なCSS：

ul { overflow: hidden; background: green; }
li:first-child { padding-left: 0; }
li { padding-left: 3px; float: left; background: red; }
li a { float: left; line-height: 40px; padding: 0 15px; background: yellow; }
li a:hover { background: purple; }

完全なHTML：

<ul>
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 2</a></li>
<li><a href="#">Item 3</a></li>
</ul>

編集2：申し訳ありませんが、サブメニューの一部を見逃しました：

http://jsfiddle.net/haa5X/4/

完全なCSS：

ul { overflow: hidden; margin: 0; background: green; }
ul > li:first-child { padding-left: 0; }
ul > li { padding-left: 3px; float: left; background: red; }
ul > li a { float: left; line-height: 40px; padding: 0 15px; background: yellow; }
ul > li a:hover { background: purple; }

li ul { display: none; position: absolute; margin-top: 40px; }
li:hover ul { display: block; }
li li { padding-left: 0; float: none; display: block; }
li li a { float: none; display: block; width: 100%; }

完全なHTML：

<ul>
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 2</a>
  <ul>
  <li><a href="#">First sub item</a></li>
  <li><a href="#">Sub item 2</a></li>
  <li><a href="#">Last sub item</a></li>
  </ul>
</li>
<li><a href="#">Item 3</a></li>
</ul>

</ p>

于 2012-09-15T13:32:16.710 に答える