みんなの「教えて(疑問・質問)」にみんなで「答える」Q&Aコミュニティ

こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

解決済みの質問

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

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

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

投稿日時 - 2011-08-29 12:55:15

QNo.6975275

すぐに回答ほしいです

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

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

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


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

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

投稿日時 - 2011-08-31 13:40:16

お礼

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

一回はまると抜け出せないもんですね;-;
ご回答ありがとうございます。
今は解決もでき、公開に向かっております…。

投稿日時 - 2011-09-02 15:01:07

このQ&Aは役に立ちましたか?

0人が「このQ&Aが役に立った」と投票しています

回答(1)

あなたにオススメの質問