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

このQ&Aのポイント
  • アメブロでヘッダーにドロップダウンのメニューを設置しようとしていて、うまくいかない状況です。
  • 現在はマウスon、off時に画像が切り替わるだけで、孫メニューは降りてきません。
  • CSSやフリープラグインの記述に何かおかしい点があるのか、教えていただきたいです。
回答を見る
  • ベストアンサー

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

アメブロでヘッダーにドロップダウンのメニューを設置しようとしていて 色々なサイトを参考にしてやっていますが、なかなかうまくいかなくて困っています。 今現在の状況はマウス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でメニューが降りてはくるので   フリースペースは合ってるのかな?と思ったので省略させてもらいました。

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

  • ベストアンサー
  • kobliha
  • ベストアンサー率88% (120/136)
回答No.1

恐らく参考にしたのは http://biboroku.watanabehiroki.net/?p=756 であろうと思うが、質問文以外のところに問題があるかも。

mikalilys
質問者

お礼

未だに機能しないですが、質問文以外に問題があるかもという ヒントをいただいたので再度cssを全部載せれるよう質問してみたいと思います。ありがとうございました。

mikalilys
質問者

補足

まさにそこを参考に作っていました。 質問文以外のところといいますと…他はアメブロのテンプレートのままなので、そこをいじらないといけないんでしょうか。

関連するQ&A

  • アメブロでヘッダーのダウンメニューが機能しない。

    以前、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時にきちんと降りて機能するんですが アメブロの場合、少し違った書き方をしなくてはいけないのでしょうか? お分かりになる方、是非ともご教示ください。

    • 締切済み
    • CSS
  • アメブロの新CSSで設置するダウンメニューについて

    アメブロ新規IDへ引っ越しする際、 旧CSSのフリースペース、プラグインの内容を新CSSに 全てコピーして貼り付けてみたのですが マウスをメニューのところへ置いてもメニューが降りなくなってしまいました。 どのように記述すればいいかご教示ください。 ブログは今日引っ越しし始めたばかりなのでまだ 手つかずですがhttp://ameblo.jp/yuzu-oilです。 以下、CSS フリースペース フリープラグインの記述したものになります。 CSSは下部に /* その他、拡張があれば記述 */ #container{ margin:10px auto; width:800px; top:400px; left:20px; position: absolute; } ul.menu li{ float:left; width:200px; height:40px; background:url("http://stat.ameba.jp/user_images/20121030/17/yuzu-oil/fb/1d/g/t02000040_0200004012262011304.gif"); position:relative; } } ul.menu li a{ display:block; width:100%; height:100%; line-height:40px; text-indent:30px; font-weight:bold; color:#CFDFB5; text-decoration:none; position:relative; } ul.menu li a:hover{ background:url("http://stat.ameba.jp/user_images/20121030/17/yuzu-oil/d0/00/g/t02000040_0200004012262011303.gif"); } ul.sub{ display:none; } ul.sub li{ float:none; } ul.sub li ul.sub{ position:absolute; left:200px; top:0; } ul.menu{ zoom:1; } ul.menu:after { height:0; visibility:hidden; content:"."; display:block; clear:both; } フリースペースは (画像の部分はそれぞれ別のオリジナルフォント画像を入れるのに使います) <div id="container"><ul class="menu"><li><a href="#1"><img src="#1画像.png" align="left" width="200" height="40 "border="0"></a></li><li><a href="#2"><img src="#2画像" align="left" width="200" height="40 "border="0"></a><ul class="sub"><li><a href="#2-1"> ~~省略~~ </li></ul></li></ul></li></ul></div> フリープラグインは <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <title>sample2</title> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <script type="text/javascript"> $(function(){ $("ul.menu li").hover(function(){ $(">ul:not(:animated)",this).slideDown("fast"); }, function(){ $(">ul",this).slideUp("fast"); }); }); </script> にしてあります。 回答よろしくお願いいたします。

    • 締切済み
    • CSS
  • jqueryのドロップダウンメニュをアメブロに。

    ドロップダウンメニューを 現在、活動しているアメブロに設置したくて jqueryを利用したものがあるのを知り さっそく本を買ってサンプルを見ながら自分なりの手を ほんの少しだけ加えて作ってみたのですが PC上では上手く動作してはいるものの アメブロに設置するとなると禁止タグや htmlなど、制限があるらしく 試行錯誤しても上手くいかず…。 どうしても、ここまでやったからには 設置してみたいとは思いつつも どこに、どのようにすればいいものか 全くわからないので お力を借りたいと思いokwaveに登録してみました。 設置の仕方や、余計な箇所や改善箇所など お分かりになる方 ぜひ、教えてください。 よろしくお願いいたします。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <title>sample2</title> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <script type="text/javascript"> $(function(){ $("ul.menu li").hover(function(){ $(">ul:not(:animated)",this).slideDown("fast"); }, function(){ $(">ul",this).slideUp("fast"); }); }); </script> <style type="text/css"> *{ margin:0; padding:0; list-style-type:none; } #container{ margin:100px auto; width:800px; } ul.menu li{ float:left; width:200px; height:40px; background:url("画像URL1"); position:relative; } * html ul.menu li{ display:inline; zoom:1; } *+html ul.menu li{ display:inline; zoom:1; } ul.menu li a{ display:block; width:100%; height:100%; line-height:40px; text-indent:30px; font-weight:bold; text-decoration:none; position:relative; } ul.menu li a:hover{ background:url("画像URL2"); } ul.sub{ display:none; } * html ul.sub{ zoom:1; position:relative; } *+html ul.sub{ zoom:1; position:relative; } ul.sub li{ float:none; } ul.sub li ul.sub{ position:absolute; left:200px; top:0; } ul.menu{ zoom:1; } ul.menu:after { height:0; visibility:hidden; content:"."; display:block; clear:both; } </style> </head> <body> <div id="container"> <ul class="menu"> <li><a href="#"><img src="画像URL3" align="left" width="200" height="40 "border="0"></a> </li> <li><a href="#"><img src="画像URL4" align="left" width="200" height="40 "border="0"></a> <ul class="sub"> <li><a href="#"><img src="画像URL5" align="left" width="200" height="40 "border="0"></a></li> <li><a href="#"><img src="画像URL6" align="left" width="200" height="40 "border="0"></a></li> <li><a href="#"><img src="画像URL7" align="left" width="200" height="40 "border="0"></a></li> </ul> </li> <li><a href="#"><img src="画像URL8" align="left" width="200" height="40 "border="0"></a> <ul class="sub"> <li><a href="#"><img src="画像URL9" align="left" width="200" height="40 "border="0"></a></li> <li><a href="#"><img src="画像URL10" align="left" width="200" height="40 "border="0"></a> <ul class="sub"> <li><a href="#"><img src="画像URL11" align="left" width="200" height="40 "border="0"></a></li> <li><a href="#"><img src="画像URL12" align="left" width="200" height="40 "border="0"></a></li> ・ ・ ・ ・ 字数制限があるので省略します…。 ・ ・ ・ ・ </ul> </div> </body> </html>   ※  もっと簡潔なやり方があるとは思うのですが    無い知恵を振り絞った結果で    画像3~は    オリジナルのフォントを使いたいが為に    透過の画像でオリジナルフォントを    メニュ背景画像の上に使っています。

  • ドロップダウンメニュー

    ドロップダウンメニュについてお伺いします。下記、サンプルがWebにあったのですが メニュー1、メニュー2、メニュー3をマウスオーバーした時に選択肢が表示されます。 しかしながら横に最大3個未満の場合、余分なスペースができてしまいます。 この余分なスペースを出さないで存在する選択肢の分だけ表示表示させるようなことは できるのでしょうか。 <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style type="text/css"> #header-wrapper { height: 60px; } #header { height: 60px; } #site-title { padding: 10px 0 0 0; } h5 { margin-top: 20px; } #main { clear: left; margin: 20px auto; padding: 5px 20px; width: 900px; } h3 { font-size: 20px; } #sample ul { list-style:none; } #menu li { position: relative; float: left; margin: 0; padding: 5px; width: 200px; height: 20px; border: solid 1px #ccc; font-weight: bold; } #menu li:hover { color: #fff; background: #333; } #menu li ul { display: none; position: absolute; top: 30px; left: -1px; padding: 5px; width: 600px; background: #eee; border: solid 1px #ccc; } #menu li ul li { float:left; margin: 0; padding: 0; width: 200px; border: none; } #menu li ul li a { display: inline-block; width: 200px; height: 20px; } #menu li ul li a:hover { background: #999; color: #fff; } </style> <script type="text/javascript" src="http://www.google.com/jsapi"></script> <script type="text/javascript">google.load("jquery", "1.7");</script> <script type="text/javascript"> $(function() { $("#menu li").hover(function() { $(this).children('ul').show(); //$('#menu li ul').css('width', '200px'); }, function() { $(this).children('ul').hide(); }); }); </script> </head> <body class="archive date col-2-right fixed loggedin browser-chrome"> <div id="page"> <div id="main"> <div id="sample"> <ul id="menu"> <li id="menu1">メニュー1 <ul> <li><a href="#">サブメニュー1-1</a></li> </ul> </li> <li id="menu2">メニュー2 <ul> <li><a href="#">サブメニュー2-1</a></li> <li><a href="#">サブメニュー2-2</a></li> </ul> </li> <li id="menu3">メニュー3 <ul> <li><a href="#">サブメニュー3-1</a></li> <li><a href="#">サブメニュー3-2</a></li> <li><a href="#">サブメニュー3-3</a></li> <li><a href="#">サブメニュー3-4</a></li> </ul> </li> </ul> </div> </div><!--main--> </div><!--page--> </body> </html>

    • 締切済み
    • CSS
  • 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; } ロールオーバー自体はうまくいっています。 他にプルダウンの方法あるよ、などありましたら教えてください。 よろしくお願いします。

  • ドロップダウンのサブメニューを画面の左右いっぱい

    メインのナビゲーションでマウスを重ねた時に下にサブメニューを表示させるのですが、画面左右いっぱいにバックカラーを入れたいのですが、できません。 バックカラーはAAAの幅になります。 ul.nav li ul.sub のwidthに数値を入れれば右側に広がりますが左右いっぱいにはなりません。 マウスを“AAA”に重ねても文字の色は変化しません。 jQueryは初めてで、マニュアル本を見ながらの作成の為、悪戦苦闘です。 よろしくお願いします。 【html】 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> <script> $(function(){ $("ul.sub").hide(); $("ul.nav li").hover(function(){ $("ul:not(:animated)",this).slideDown("fast"); }, function(){ $("ul",this).slideUp("fast"); }); }); </script> </head> <div class="wrapper"> <nav> <ul class="nav"> <li><a href="#">AAA</a></li> <ul class="sub"> <li><a href="#">AAA-1</a></li>     <li><a href="#">AAA-2</a></li>      <li><a href="#">AAA-3</a></li> </ul> <li><a href="#">BBB</a></li> <li><a href="#">CCC</a></li> <li><a href="#">DDD</a></li> <li><a href="#">EEE</a></li> </ul> </nav> </div> 【CSS】 .wrapper { position: relative; width: 960px; margin-left:auto; margin-right:auto; } ul.nav { width: 960px; margin: 0; margin-left:auto; margin-right:auto; border-top: 1px solid #ccc; border-bottom: 1px solid #ccc; padding: 10px 0; ul.nav li { border-left: 1px solid #ccc; float: left; position:relative } ul.nav li:first-child { border: 0; padding-left:150px; } ul.nav li a{ display: block; padding:10px 30px; color: #333; text-decoration: none; } ul.nav li a:hovre{ color:#009F00; } ul.nav:after { height:0; visibility:hidden; content:"."; display:block; clear:both; } ul.nav li ul.sub { position: absolute; top:30px; width:100%; background-color:#808080; } ul.nav li ul.sub li{ float:left; } ul.nav li ul.sub:after { height:0; content:"."; display:block; clear:both; }

    • 締切済み
    • CSS
  • CSSでプルダウンメニュー

    お世話になります。 添付画像のようなプルダウンメニューを作りたいです。 http://css-eblog.com/csstechnique/css-8.html こちらを参考にさせていただき、ソースを変更しました。一応動作はするのですが、不具合があり悩んでいます。 問題はマウスオーバーさせたい画像の高さ(60px)とプルダウンで出てくるもの(画像は使用せずCSSで背景色をしたバー状になっています)の高さ(20px)が異なることです。 添付画像のように、画像A全体がマウスオーバー領域となり、20pxのバーが出るようにしたいのですが、現在はBのようにバーが60pxとなっています。 ※IE6のみ。他ブラウザではバーの高さ自体は20pxであるものの、リンク先1の領域が60pxとなっているため、リンク先2の文字が書かれている20px付近をクリックしてもリンク先1に行ってしまいます。 そこでソースの値を .menu ul li a { display: block; height: 20px;←ココ padding:3px; } と変更したら、バーは20pxで出るようになり、リンク先2もうまく選べるものの、今度は60pxの画像の上20px部分のみしかマウスオーバーに反応しなくなってしまいました。 知識がなくどうしていいのかサッパリ分かりません。 どうか助けて下さい! 下記ソースです。 /* CSS*/ .menu { margin:0px auto; padding:0px; width:760px; height:60px; } .menu ul li { float: left; position: relative; margin-right: 0px; width: 128px; height: 20px; list-style:none; } .menu ul li table { border-collapse: collapse; border: none; font-size: 10px; padding: 0; position: absolute; top: 0; left: 0; } .menu ul li ul { visibility: hidden; overflow: hidden; position: absolute; top:60px; left: 0px; width: 128px; height:20px; z-index: 100; } .menu ul li ul li { margin-bottom: 0; width: 128px; height: 20px; } .menu ul li a { display: block; height: 60px; padding:3px; } .menu ul li a:hover { position: relative; z-index: 100; } .menu ul li:hover ul , .menu ul li a:hover ul { visibility: visible; overflow: visible; height: auto; z-index: 10; } .menu li.test {background:url(../image/test.jpg) left top no-repeat; width:128px; height:60px;} .menu li.sub { background-color:#666666; color:#FFFFFF; text-align:left; width:122px; height:20px; padding:3px;} a.sub:link{font-size:10px; color:#FFFFFF; text-decoration:none;}/*サブメニューリンク*/ a.sub:visited{font-size:10px; color:#FFFFFF; text-decoration:none;} a.sub:hover{ font-size:10px; color:#FFFFFF; text-decoration:underline;} a.sub:active{ font-size:10px; color:#FFFFFF; text-decoration:underline;} <!--html--> <div class="menu"> <ul> <li class="test"><a href="test.html"><!--[if IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]--> <ul> <li class="sub"><a href="test.html" class="sub">リンク先1</a></li> <li class="sub"><a href="test2.html" class="sub">リンク先2</a></li> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--> </li> </ul> </div> 長文申し訳ありません。よろしくお願い致します。

    • ベストアンサー
    • CSS
  • jQueryでドロップダウンメニューができない

    jQueryの参考書をみながらドロップダウンメニューを実装しようとしたのですが うまくいきません。 締切が迫って焦っております。 <ul class="main"> <li><a href="index.html">メインA</a></li> <li><a href="concept.html">メインA</a></li> <li><a href="service.html">メインA</a> <ul class="sub"> <li><a href="">サブ1</a></li> <li><a href="">サブ2</a></li> <li><a href="">サブ3</a></li> <li><a href="">サブ4</a></li> <li><a href="">サブ5</a></li> </ul> </li> <li><a href="faq.html">メインA</a></li> <li><a href="access.html">メインA</a></li> </ul> cssは .main { clear:both; width:830px; height:42px; margin:0 auto; list-style-type:none; } ul .main li { width:166px; height:42px; float:left; position:relative; background:url(../../img/index/btn.png); } .main li a { display:block; width:100%; height:100%; padding:10px 0 0 40px; font-size:14px; font-weight:bold; color:#333333; text-decoration:none; line-height:1.5em; } ul .sub{ display:none; } scriptは <script type="text/javascript"> $(function(){ $("ul.main li").hover(function(){ $(">ul:not(:animated)",this).slideDown("fast"); }, function(){ $(">ul",this).slideUp("fast"); }) }) </script> です。いろいろ試行錯誤したのですがドロップダウンメニュ-が表示されず 困っています。何か見落としがあるのでしょうか。よろしくお願いいたします。

    • ベストアンサー
    • HTML
  • ドロップダウンメニューについて質問です。

    横並びのナビゲーションに更にドロップダウンをつけたいのですがうまくいかないので質問させていただきます。 メニューはそれぞれバッググラウンドで使ってます。 横並びのナビげーションはできました。 ロールオーバー時の画像の入れ替えもできました。 コレクション部分のドロップダウンがうまくいきません。 ドロップダウンで3つでるようにしたいと思うのですが 現状のHTML&CSSを記載します。 よろしくお願いいたします。 html <div id="navi"> <ul> <li class="nav_03"> <ul class="sub"> <li class="nav_001"></li> <li class="nav_002"></li> <li class="nav_003"></li> </ul> </li> </ul> </div> CSS #navi { height: 10px; width: 650px; margin-top: 34px; margin-left: 154px; margin-bottom: 75px; } #navi li { float:left; list-style-type: none; } .nav_03 a { height: 10px; width: 54px; background-image: url(../images/navi/catalog.jpg); background-repeat:no-repeat; display:block; text-indent:-9999px; margin-right: 42px; } .nav_03 a:hover { height: 10px; width: 54px; background-image: url(../images/navi/catalog_r.jpg); background-repeat:no-repeat; display:block; text-indent:-9999px; margin-right: 42px; #navi ul.sub li { float: none; height: 10px; width: 54px; list-style-type: none; } #navi ul.sub li a { background: none; height: 10px; width: 54px; } #navi ul.sub .nav_001 li a:hover { background-image: url(../images/navi/tops_r.jpg); height: 10px; width: 54px; display: block; background-repeat: no-repeat; position: absolute; z-index: 10; } #navi ul.sub .nav_001 li a{ background-image: url(../images/navi/tops.jpg); height: 10px; width: 54px; display: block; background-repeat: no-repeat; } /*サブメニューを、カーソルが乗るまで非表示にしておく設定*/ ul .nav_04 li ul { display: none; } /*サブメニューを、カーソルが乗った時に表示する設定*/ #navi ul li:hover .sub .nav_001{ display: block; position: absolute; z-index: 100; background-image: url(../images/navi/tops.jpg); height: 10px; width: 54px; display: block; float:left; line-height: 180%; } #navi ul li:hover .sub .nav_002{ display: block; position: absolute; z-index: 100; background-image: url(../images/navi/bottoms.jpg); height: 10px; width: 54px; display: block; float:left; line-height: 180%; }}

  • ページを開いた直後のサブメニューを非表示

    現在、個人で利用するサイトをJqueryを導入してリニューアルしようと計画しているのですが、 添付画像のように新しいページを開いた直後は、左の青いサブメニューが必ず表示されてしまいます。 ("#menu ul li ul:first").hide();を入れると 消えることには消えたのですが、 それ以後サブメニューが表示されなくなってしまいました。 どなたかお分かりの方、ご助言をお願い致します。 参考までに以下にHTMLとCSSのコードを記載します。 (HTML) <html> <head> </head> <body> <div id="content"> <div id="menuWrapper" class="menuWrapper bg1"> <ul class="menu" id="menu"> <li class="bg1" style="background-position:0 0;"> <a id="bg1" href="#">Our Passion</a> <ul class="sub1" style="background-position:0 0;"> <li><a href="#">Submenu 1</a></li> <li><a href="#">Submenu 2</a></li> <li><a href="#">Submenu 3</a></li> </ul> </li> <li class="bg1" style="background-position:-266px 0px;"> <a id="bg2" href="#">Our Brands</a> <ul class="sub2" style="background-position:-266px 0;"> <li><a href="#">Submenu 1</a></li> <li><a href="#">Submenu 2</a></li> <li><a href="#">Submenu 3</a></li> </ul> </li> <li class="last bg1" style="background-position:-532px 0px;"> <a id="bg3" href="#">Contact</a> <ul class="sub3" style="background-position:-266px 0;"> <li><a href="#">Submenu 1</a></li> <li><a href="#">Submenu 2</a></li> <li><a href="#">Submenu 3</a></li> </ul> </li> </ul> </div> </div> </body> </html> (CSS) .menuWrapper{ font-family: "Trebuchet MS", Arial, sans-serif; font-size: 15px; font-style: normal; font-weight: normal; text-transform:uppercase; letter-spacing: normal; line-height: 1.45em; position:relative; margin:20px auto; height:542px; width:797px; background-position:0 0; background-repeat:no-repeat; background-color:transparent; } ul.menu{ list-style:none; width:797px; } ul.menu > li{ float:left; width:265px; height:542px; border-right:1px solid #777; background-repeat:no-repeat; background-color:transparent; } ul.menu > li.last{ border:none; } .bg1{ background-image: url(../images/1.jpg); } .bg2{ background-image: url(../images/2.jpg); } .bg3{ background-image: url(../images/3.jpg); } ul.menu > li > a{ float:left; width:265px; height:50px; margin-top:450px; text-align:center; line-height:50px; color:#ddd; background-color:#333; letter-spacing:1px; cursor:pointer; text-decoration:none; text-shadow:0px 0px 1px #fff; } ul.menu > li ul{ list-style:none; float:left; margin-top:-180px; width:100%; height:110px; padding-top:20px; background-repeat:no-repeat; background-color:transparent; } ul.menu > li ul li{ display:none; } ul.menu > li ul.sub1{ background-image:url(../images/bg1sub.png); } ul.menu > li ul.sub2{ background-image:url(../images/bg2sub.png); } ul.menu > li ul.sub3{ background-image:url(../images/bg3sub.png); } ul.menu > li ul li a{ color:#fff; text-decoration:none; line-height:30px; margin-left:20px; text-shadow:1px 1px 1px #444; font-size:11px; } ul.menu > li ul.sub1 li{ display:block; } ul.menu > li ul li a:hover{ border-bottom:1px dotted #fff; }