-PR-
  • すぐに回答を!
  • 質問No.6975275
解決
済み

jqueryでのプルダウンメニューについて

  • 閲覧数298
  • ありがとう数1
  • 気になる数0
  • 回答数1
  • コメント数0

お礼率 25% (1/4)

jqueryでのプルダウンメニューについて
こんにちは。
現在私はWEBサイトを製作中です。

メインメニューにプルダウンをつけたいのですが、うまくいきません。

メニューはロールオーバーでの表示(CSSでやってます)です。

slideDownを使用しているのですが、
マウスオーバー時にslidDownで表示された、
サブメニューの背景が、上の要素の背景になってしまいます。
つまり、下のコードでいくとid="sub"の背景がそのまま
clas="sub"の"li"要素の背景になってしまうということです。
何か対策はありますでしょうか?

html
<div id="head">
<ul id="globalnavi">
<li id="gh"><a href=".">メニュー</a>
<ul class="sub">
<li><a href="">サブメニュー</a></li>
</ul>
</li>
</ul>
</div>

<div id="main">
</div>

jquery

$(function(){
$("ul.sub").hide();
$("ul#globalnavi>li").hover(function(){
$("ul:not(:animated)", this).slideDown();},
function(){$("ul.sub",this).slideUp();});
});

CSS
#globalnavi a{
background-image : url(../img/navi.png);
background-repeat : no-repeat;
display : block;
width : 160px;
height : 36px;
color: #333333;
text-decoration: none;
line-height: 36px;
}


#header #globalnavi li {
list-style-type: none;
float: left;
width : 160px;
position: relativ;
}

#header #globalnavi {
clear: both;
width: 960px;
line-height: 36px;
overflow: hidden;
position: relative;
text-align: center;
display: block;
}

ul,li{
margin:0;
padding:0;
}

.sub li{
float: none;
background-color: #FFF;

}

#gh a{
background-position:0 0;
}
#gh a:hover{
background-position:0 -36px;
}

ロールオーバー自体はうまくいっています。
他にプルダウンの方法あるよ、などありましたら教えてください。
よろしくお願いします。
通報する
  • 回答数1

質問者が選んだベストアンサー

  • 回答No.1
レベル14

ベストアンサー率 61% (1594/2576)

回答がないみたいなので…

ご提示のサンプルでそのままロールオーバーもスライドメニューも動作しますけれど、何が問題なのでしょうか?


よくわかりませんが、質問文の中で認識が違っていそうなのは
>id="sub"の背景がそのまま
>clas="sub"の"li"要素の背景になってしまうということです。
ご提示のサンプルにはid="sub"が見当たりません。
class="sub"の背景は、CSSの『#globalnavi a{~』で指定されているものなので、別の背景に変わっているものではないのでは?

>サブメニューの背景が、上の要素の背景になってしまいます。
ul.sub li aの背景は(↑)に書いたように、『#globalnavi a{~』で指定されているので、結果的にli#gh直下のa要素(親メニュー?)の背景と同じものが使われることになります。
それなので、ご質問の『なってしまいます』という文章のニュアンスからすると、何か勘違いなさっているのかも。
#gh a:hoverで指定しているロールオーバーも、当然ながら、この部分(サブメニュー?)にも適用されることになります。
お礼コメント
ecstacy666

お礼率 25% (1/4)

なにやら、heightが問題の様子でした…。
あと、親をしっかり引き継いでいる様子で;

一回はまると抜け出せないもんですね;-;
ご回答ありがとうございます。
今は解決もでき、公開に向かっております…。
投稿日時 - 2011-09-02 15:01:07
-PR-
-PR-
  • 回答数1
このQ&Aのテーマ
このQ&Aで解決しましたか?

関連するQ&A

-PR-
-PR-
こんな書き方もあるよ!この情報は知ってる?あなたの知識を教えて!
このQ&Aにはまだコメントがありません。
あなたの思ったこと、知っていることをここにコメントしてみましょう。

その他の関連するQ&A、テーマをキーワードで探す

キーワードでQ&A、テーマを検索する
-PR-
-PR-
-PR-

特集


関連するQ&A

-PR-

ピックアップ

-PR-
ページ先頭へ