人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

CSSとJQueryの表示部分で悩んでます。

グローバルナビのプルダウンがJQueryで作成した画像アニメーションの下に潜り込んでしまいます。
CSSのプルダウンの部分に
position: absolute;
z-index: 1;
を加えると解消できるといった表記がありやってみたのですが、確かに画像アニメーションの上に表示されるようになったのですが、画像のようにプルダウンの全ての項目が全て重なってしまいます。
どのようにすれば回避できるでしょうか?

ご教授宜しくお願いします。

1389833674
●拡大する

●質問者: hiroyukkkky
●カテゴリ:ウェブ制作
○ 状態 :終了
└ 回答数 : 2/2件

▽最新の回答へ

1 ● Lhankor_Mhy

できればコードをご提示いただきたいのです。その方が回答がしやすいです。

とりあえず、ご質問の様子から想像すると、スタイルの付け方が違うのではないでしょうか。
プルダウンメニューが

<ul>
 <li>会社概要</li>
 <li>企業理念</li>
 ...

のようにマークアップされているところに

li{
 position: absolute;
 z-index: 1;
}

とスタイルを書いているのではないでしょうか。

もしそうであるなら、以下のような感じにするとどうなりますか。

ul{
 position: absolute;
 z-index: 1;
}


※回答はあくまで想像上のコードです。実際のコードとは異なります。


hiroyukkkkyさんのコメント
ソースで該当部分と思われる部分を抜粋しました。宜しくお願いします。

質問者から

該当部分のソースを記述します。
(社名の部分は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>


2 ● Lhankor_Mhy
ベストアンサー

補足拝読しました。
入れ子になっているっぽいので周辺のマークアップによってやり方が変わると思いますが、以前の回答のとおりで上手くいきそうな気がします。

#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;
}

hiroyukkkkyさんのコメント
ありがとうございます!!無事最前面に表示されました。本当に助かりました!
関連質問

●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ