締切済み

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

2012/11/01 16:34

アメブロ新規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> にしてあります。回答よろしくお願いいたします。

yuzucocco
お礼率0% (0/3)

CSS
回答数3
ありがとう数0

みんなの回答 （3）
専門家の回答

みんなの回答

ORUKA1951
ベストアンサー率45% (5062/11036)

2012/11/07 18:25 回答No.3

確認しました。そのノードをfirefoxのfirebugで確認すると <li><a href="#1"><img src="#1画像.png" align="left" border="0" height="40 " width="200"></a></li><li><a href="#2"><img src="#2画像" align="left" border="0" height="40 " width="200"></a><ul style="display: block;" class="sub"><li><a href="#2-1"><img src="#2-1画像.png" align="left" border="0" height="40 " width="200"></a></li><li><a href="#2-2"><img src="#2-2画像.png" align="left" border="0" height="40 " width="200"></a></li><li><a href="#2-3"><img src="#2-3画像.png" align="left" border="0" height="40 " width="200"></a></li></ul></li><li><a href="#3"><img src="#3画像.png" align="left" border="0" height="40 " width="200"></a></li><li><a href="#4"><img src="#4画像.png" align="left" border="0" height="40 " width="200"></a><ul class="sub"><li><a href="#4-1"><img src="#4-1画像.png" align="left" border="0" height="40 " width="200"></a><ul class="sub"><li><a href="＃4-1-1"><img src="#4-1-1画像.png" align="left" border="0" height="40 " width="200"></a></li><li><a href="＃4-1-2"><img src="＃4-1-2画像.png" align="left" border="0" height="40 " width="200"></a></li><li><a href="＃4-1-3"><img src="＃4-1-3画像.png" align="left" border="0" height="40 " width="200"></a></li><li><a href="＃4-1-4"><img src="＃4-1-4画像.png" align="left" border="0" height="40 " width="200"></a></li></ul></li><li><a href="#4-2"><img src="＃4-2画像.png" align="left" border="0" height="40 " width="200"></a><ul class="sub"><li><a href="＃4-2-1"><img src="＃4-2-1画像.png" align="left" border="0" height="40 " width="200"></a></li></ul></li><li><a href="#4-3"><img src="＃4-3画像.png" align="left" border="0" height="40 " width="200"></a><ul class="sub"><li><a href="#4-3-1"><img src="＃4-3-1画像.png" align="left" border="0" height="40 " width="200"></a></li></ul></li></ul></li> ・・画像が指定されていませんし、テキストもありません。・・スタイルシートでプルダウンの指定もされていません。 firefoxのDominspectorで見ると、16階層も下がらないとなりません。 html/body/div/div/div/div/div[2]/div[2]/div/div/div/aside/div/div/div/div/ul/li[2]/ul/li <body> ＿<a name="pageTop"></a> ＿<div class="skinBody"> ＿＿<div class="skinBody2"> ＿＿＿<div class="skinBody3"> ＿＿＿＿<ul id="keyJumpNav"> ＿＿＿＿＿<ul id="amebaBar"> ＿＿＿＿＿＿<div class="skinFrame"> ＿＿＿＿＿＿＿<div class="headerBnrArea"> ＿＿＿＿＿＿＿＿<div class="skinFrame2"> ＿＿＿＿＿＿＿＿＿<div class="skinHeaderFrame"> ＿＿＿＿＿＿＿＿＿＿<div class="skinContentsFrame"> ＿＿＿＿＿＿＿＿＿＿＿<div class="skinContentsArea"> ＿＿＿＿＿＿＿＿＿＿＿＿<div class="skinContentsArea2"> ＿＿＿＿＿＿＿＿＿＿＿＿＿<div class="layoutContentsA"> ＿＿＿＿＿＿＿＿＿＿＿＿＿＿<div class="skinMainArea"> ＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿<aside> ＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿<div class="skinSubA skinSubArea"> ＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿<div class="skinSubA2"> ＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿<div class="freespaceArea subModule"> ＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿<div id="container"> ＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿<ul class="menu"> ＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿<li> ＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿<li>・・ここがプルダウン・・・＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿<a href="#2"> ＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿<ul class="sub" style="display: block;"> ＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿<li> ＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿<li> ＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿<li> ＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿</ul> ＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿</li> ＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿<li> ＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿<li> ＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿</ul> ＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿</div> ・・・泣けてきます。・・・・　ひとつひとつ画像を <a href="#1"><img src="#1画像.png" align="left" border="0" height="40 " width="200"> ↓ <a href="リンク先"><img src="画像" align="left" border="0" height="40 " width="200"> 　指定しなければなりません。　そのうえで、このメニューに対して先の回答を参考にスタイルシートを書いてください。　これしきの内容でしたら、テキストエディタで作成すると数十分の一ですむ(百分の一になるかも)ものを・・・。　ちょっと、私を含めて他人に頼むのは無理があります。--あなたから画像やリンク先のデータをいただいても一週間机につめなければ無理です。　テンプレートを利用してゼロからデータを入れなおすほうが早いです。　半日もあれば・・添付画像はfirebugのもの　

ログインすると、全ての回答が全文表示されます。

ORUKA1951
ベストアンサー率45% (5062/11036)

2012/11/06 19:06 回答No.2

プルダウンメニューの仕組みはご理解いただけているとして。＞手つかずですがhttp://ameblo.jp/yuzu-oilです。　には、プルダウンすべきリストすらありません。

質問者

補足 2012/11/07 16:37

ORUKA1951さん無知な私に貴重なお時間をかけさせてしまって大変申し訳ありません。リストというのは <div id="container"><ul class="menu"><li><a href="#1"><img src="#1画像.png" align="left" width="200" height="40 "border="0"></a></li ・・・のような記述ものもでしょうか。一応アメブロのフリースペースに書いて、ソースの表示でも書いてあるように見えたのですが、全くの見当違いだったらすみません…。アメブロのCSS、フリースペース、フリープラグインそれぞれにどのような記述をすればいいでしょうか。

ログインすると、全ての回答が全文表示されます。

ORUKA1951
ベストアンサー率45% (5062/11036)

2012/11/01 18:44 回答No.1

直前の質問 CSSでドロップダウンにしたいのですが - Webデザイン・CSS - 教えて！goo ( http://okwave.jp/qa/q7776610.html ) にきちんと順序だてて説明してありますから、まずそれを確認してください。

質問者

補足 2012/11/06 15:50

確認させて頂きました。 webで調べてみたり、提示してもらったURLを見てもどこがおかしいのはわかりませんでした…。アメブロの仕様が変わったから旧CSSやフリープラグイン、スペースなどを新CSS全てコピー貼り付けをしてもダメなのでしょうか。あと何か記述がおかしいという個所があれば教えていただけますでしょうか。

ログインすると、全ての回答が全文表示されます。