• 締切済み

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

karita8339の回答

回答No.1

フリースペースに書いている情報には改行は含めていないでしょうか? アメブロではフリースペース内でタグを改行すると、それを<br>としてソースに書き出してしまいます。 一行で書いていて、かつマウスオーバーで背景変更の処理などをしているのに、 cssの処理もおかしいようであれば、上に何か重なっている可能性もありそうです。 jqueryの読み込ませ方など、調べた限り間違ってはいなさそうなのですが・・・。

mikalilys
質問者

補足

早速の回答ありがとうございます。 フリースペースの件ですが、改行のせいでおかしくなるということを知っていたので改行はしていません。 前回の質問の回答してくださった方も質問文以外の部分が怪しいとおっしゃっていたので アメブロのカスタマイズ可のcssのどこかが邪魔しているということでいいのでしょうか? そのcssも本当でしたら、書き出して助言を仰ぎたいところですが字数の関係でそれができないのがもどかしいです…。

関連するQ&A

  • アメブロで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でメニューが降りてはくるので   フリースペースは合ってるのかな?と思ったので省略させてもらいました。

  • アメブロの新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
  • ドロップダウンメニュー

    ドロップダウンメニュについてお伺いします。下記、サンプルが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
  • ドロップダウンメニューについて質問です。

    横並びのナビゲーションに更にドロップダウンをつけたいのですがうまくいかないので質問させていただきます。 メニューはそれぞれバッググラウンドで使ってます。 横並びのナビげーションはできました。 ロールオーバー時の画像の入れ替えもできました。 コレクション部分のドロップダウンがうまくいきません。 ドロップダウンで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のドロップダウンメニュをアメブロに。

    ドロップダウンメニューを 現在、活動しているアメブロに設置したくて 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~は    オリジナルのフォントを使いたいが為に    透過の画像でオリジナルフォントを    メニュ背景画像の上に使っています。

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

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

    現在、個人で利用するサイトを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; }

  • 画像を使ったドロップダウンメニュー

    ホームページのメニューボタンにドロップダウンを使おうと思っています。 色々ネットから調べて自分で試したのですが、 オンマウスで画像を変えたりと、少し複雑な為、うまく表示できません。 文字数の関係上スタイルシートのコードだけしか貼れませんが、 よろしくお願いいたします。 /* ナビゲーション */ #navi_continer { position: relative; z-index:100; width: 400px; height:110px; } #navi { position: absolute; width: 100px; background-image: url(./img/menu/03a.jpg); height: 110px; } #navi ul { margin: 0; padding: 0; list-style: none; } #navi li { color: #fffff; float: left; width: 100px; margin: 0; } #navi li a { font-size: 14px; color: #ffffff; display: block; width: 100%; padding: 3px 0; text-align: center; font-weight: bold; text-decoration: none; background-image: none; } #navi li a:hover { color: #ffffff; background-image: url(./img/menu/03b.jpg); height: 110px; width: 100px; } /* サブメニュー */ #navi ul.sub { background: #eeeeee; } #navi ul.sub li { float: none; } #navi ul.sub li a { color: #666666; background: none; font-size: 12px; font-weight: normal; padding: 3px 0; border-top:1px solid #000099; } #navi ul.sub li a:hover { color: #ffffff; background-color: #ff9900; } #navi ul li.navi_menu ul { display: none; } #navi ul li.navi_menu_on ul { display: block; } #navi li.navi_menu{ border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; } #navi li.navi_menu_on{ border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; }button { background-image: url(%E3%83%94%E3%82%AF%E3%83%81%E3%83%A3%201.jpg); }

  • ドロップダウンメニューについて

    apycomでhttp://apycom.com/menus/1-yellow-green.htmlの ドロップダウンメニューをダウンロードして設定しているのですが、サブメニューのリンク文字の変更方法が分からなくて困っています。 サブメニューの背景を変更したのでリンクの文字をもっとハッキリ見える色に変更したいです。 マウスが乗った時の文字の色も変更できません。 昨日から色々やってるのですがどうしても解決できないのでお聞きしました。 よろしくお願いします。 /** ********************************************* * Prototype of styles for horizontal CSS-menu * @data 30.06.2009 ********************************************* * (X)HTML-scheme: * <div id="menu"> * <ul class="menu"> * <li><a href="#" class="parent"><span>level 1</span></a> * <ul> * <li><a href="#" class="parent"><span>level 2</span></a> * <ul><li><a href="#"><span>level 3</span></a></li></ul> * </li> * </ul> * </li> * <li class="last"><a href="#"><span>level 1</span></a></li> * </ul> * </div> ********************************************* */ /* menu::base */ div#menu { height:41px; background : transparent url(main-bg.png) repeat-x scroll 0% 0%; } div#menu ul { margin: 0; padding: 0; list-style: none; float: left; } div#menu ul.menu { padding-left: 30px; } div#menu li { position: relative; z-index: 9; margin: 0; padding: 0 5px 0 0; display: block; float: left; } div#menu li:hover >ul { left: -2px; } div#menu a { position: relative; z-index: 10; height: 41px; display: block; float: left; line-height: 41px; text-decoration: none; font: normal 12px Trebuchet MS; } div#menu a:hover, div#menu a:hover span { color: #fff; } div#menu li.current a {} div#menu span { display: block; cursor: pointer; background-repeat: no-repeat; background-position: 95% 0; } div#menu ul ul a.parent span { background-position:95% 8px; background-image : url(item-pointer.gif); } div#menu ul ul a:hover.parent span { background-image : url(item-pointer-mover.gif); } /* menu::level1 */ div#menu a { padding: 0 10px 0 10px; line-height: 30px; color : rgb(56, 56, 56); } div#menu span { margin-top: 5px; }/**@replace#1*/ div#menu li { background : transparent url(main-delimiter.png) no-repeat scroll 98% 4px; } div#menu li.last { background: none; } /* menu::level2 */ div#menu ul ul li { background: none; } div#menu ul ul { position: absolute; top: 38px; left: -999em; width: 163px; padding: 5px 0 0 0; background : rgb(179, 221, 81) none repeat scroll 0% 0%; margin-top:1px; } div#menu ul ul a { padding: 0 0 0 15px; height: auto; float: none; display: block; line-height: 24px; color : rgb(56, 56, 56); } div#menu ul ul span { margin-top: 0; padding-right: 15px; _padding-right: 20px; color : rgb(56, 56, 56); } div#menu ul ul a:hover span { color: #fff; } div#menu ul ul li.last { background: none; } div#menu ul ul li { width: 100%; } /* menu::level3 */ div#menu ul ul ul { padding: 0; margin: -38px 0 0 163px !important; margin-left:172px; color: #FFFFFF; } /* colors */ div#menu ul ul ul { background: rgb(41,41,41); } div#menu ul ul ul ul { background: rgb(38,38,38); } div#menu ul ul ul ul { background: rgb(35,35,35); } /* lava lamp */ div#menu li.back { background : transparent url(lava.png) no-repeat scroll right -44px !important; background-image : url(lava.gif); width: 13px; height: 44px; z-index: 8; position: absolute; margin: -1px 0 0 -5px; } div#menu li.back .left { background : transparent url(lava.png) no-repeat scroll left top !important; background-image : url(lava.gif); height: 44px; margin-right: 8px; } 【html】 <div id="menu"> <ul class="menu"> <li><a href="#"><span>Home</span></a> <li><a href="#" class="parent"><span>商品紹介</span></a> <ul> <li><a href="#"><span>コンクリート</span></a> <li><a href="#"><span>木材</span></a> <li><a href="#"><span>アクセサリー</span></a> <li><a href="#"><span>砂</span></a> <li><a href="#"><span>フード</span></a>