アメブロでヘッダーのダウンメニューが機能しない。
以前、http://okwave.jp/qa/q8557729.htmlにて
jQueryを使ったメニューが機能しないので質問しましたが
解決しなかったので再度の質問させていただきます。
以前の質問に回答してくれた方は記載してない部分に問題があるかもと指摘していただき
cssを全て書こうとしましたが文字数の関係でほとんど書けません…。
一応、cssに手を加えているのはアメブロから提供されているカスタマイズできるcssで
2箇所のみになります。以前の質問と重複してしまうかもしれませんが、
その2箇所は
ヘッダー画像を変えるために
/* skinHeaderArea ブログヘッダー980pxエリア */
.skinHeaderArea{
height:300px;
background-image:url(http://stat.blogskin.ameba.jp/blogskin_images/20121025/18/44/e9/p/o09000360●●●1351157583098.png);
background-repeat:no-repeat;
background-position:center top;
}
/* ←ブログヘッダーに背景画像を敷きたいとき */
の部分と
最後の追記する箇所で↓↓
#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>
っと書いています。
試しにfc2のブログで上記のをコピペしてやってみると
メニューもマウスon時にきちんと降りて機能するんですが
アメブロの場合、少し違った書き方をしなくてはいけないのでしょうか?
お分かりになる方、是非ともご教示ください。