アメブロでjquaryを使ったメニューが機能しない

解決済

質問者：mikalilys
質問日時：2014/04/17 07:08
回答数：1件

アメブロでヘッダーにドロップダウンのメニューを設置しようとしていて
色々なサイトを参考にしてやっていますが、なかなかうまくいかなくて困っています。

今現在の状況はマウスon、off時に画像が切り替わるだけで
孫メニューはおろか子メニューすら降りてきません…。
どこか記述などでおかしい点がありましたら教示よろしく願います。

－－－－－－－－－－－－以下CSS編集の最後に記述してます－－－－－－－－－－－

/* その他、拡張があれば記述 */

#headermenu{

margin:10px auto;
width:720px;
position:absolute;
top:200px;
left:20px;
}

ul.menu li{
float:left;
width:180px;
height:35px;
background:url("ここにマウスoff時の画像のURLを入れてます");
position:relative;
}
ul.menu li a{
display:block;
width:100%;
height:100%;
position:relative;
}
ul.menu li a:hover{
background:url("ここにマウスon時の画像のURL入れてます");
}
ul.sub{
display:none;
}
ul.sub li{
float:none;
}
ul.sub li ul.sub{
position:absolute;
left:180px;
top:0;
}
ul.menu{
zoom:1;
}
ul.menu:after {
height:0;
visibility:hidden;
content:".";
display:block;
clear:both;
}

－－－－－－－－－－－フリープラグイン－－－－－－－－－

<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">google.load('jquery', '1.6.2');</script>
<script type="text/javascript">(_JQ162_=jQuery)(function(){$=jQuery=_JQ162_;});</script>

<script>
$(function(){
$("ul.sub").hide();
$("ul.menu li").hover(function(){
$(">ul:not(:animated)",this).slideDown("fast");
},
function(){
$(">ul",this).slideUp("fast");
});
});
</script>

－－－－－－－－－－－－フリースペース－－－－－－－－－－－－

<div id="headermenu"><ul class="menu"><li>

字数の関係で省略させてもらいます。

</li></ul></div>

※cssのmenuと書かれている部分をmenusみたいに違ったものに変えると
　縦メニューになってしまいますが、マウスonでメニューが降りてはくるので
　フリースペースは合ってるのかな？と思ったので省略させてもらいました。