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

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

回答No.1

fujillin · ベストアンサー

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

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

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

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

お礼

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

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