グローバルナビのプルダウンがJQueryで作成した画像アニメーションの下に潜り込んでしまいます。
CSSのプルダウンの部分に
position: absolute;
z-index: 1;
を加えると解消できるといった表記がありやってみたのですが、確かに画像アニメーションの上に表示されるようになったのですが、画像のようにプルダウンの全ての項目が全て重なってしまいます。
どのようにすれば回避できるでしょうか?
ご教授宜しくお願いします。
補足拝読しました。
入れ子になっているっぽいので周辺のマークアップによってやり方が変わると思いますが、以前の回答のとおりで上手くいきそうな気がします。
#header #global_nav li li > a { display: block; /* ここを削除 position: absolute; z-index: 2; */ padding: .75em 2em; text-decoration: none; color: #333; background-image: url(../images/arrow_02.png); background-repeat: no-repeat; background-position: 1em center; ... } #header #global_nav li ul { position: absolute; z-index: 2; }
できればコードをご提示いただきたいのです。その方が回答がしやすいです。
とりあえず、ご質問の様子から想像すると、スタイルの付け方が違うのではないでしょうか。
プルダウンメニューが
<ul> <li>会社概要</li> <li>企業理念</li> ...
のようにマークアップされているところに
li{ position: absolute; z-index: 1; }
とスタイルを書いているのではないでしょうか。
もしそうであるなら、以下のような感じにするとどうなりますか。
ul{ position: absolute; z-index: 1; }
※回答はあくまで想像上のコードです。実際のコードとは異なります。
ソースで該当部分と思われる部分を抜粋しました。宜しくお願いします。
該当部分のソースを記述します。
(社名の部分はxxxで伏せております)
■プルダウンの重なっている部分
#header #global_nav li li > a {
display: block;
position: absolute;
z-index: 2;
padding: .75em 2em;
text-decoration: none;
color: #333;
background-image: url(../images/arrow_02.png);
background-repeat: no-repeat;
background-position: 1em center;
■HTML
<ul class="sub-menu">
<li id="menu-item-2297" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-2297 menu-item-slug-about"><a href="http://xxx.co.jp/about/">会社概要</a></li>
<li id="menu-item-2294" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-2294 menu-item-slug-philosophy"><a href="http://xxx.co.jp/about/philosophy/">企業理念</a></li>
<li id="menu-item-2293" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-2293 menu-item-slug-history"><a href="http://xxx.co.jp/about/history/">沿革</a></li>
</ul>
補足拝読しました。
入れ子になっているっぽいので周辺のマークアップによってやり方が変わると思いますが、以前の回答のとおりで上手くいきそうな気がします。
#header #global_nav li li > a { display: block; /* ここを削除 position: absolute; z-index: 2; */ padding: .75em 2em; text-decoration: none; color: #333; background-image: url(../images/arrow_02.png); background-repeat: no-repeat; background-position: 1em center; ... } #header #global_nav li ul { position: absolute; z-index: 2; }
ありがとうございます!!無事最前面に表示されました。本当に助かりました!
ありがとうございます!!無事最前面に表示されました。本当に助かりました!
2014/01/18 16:43:39