- 締切済み
アメブロの新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> にしてあります。 回答よろしくお願いいたします。
- みんなの回答 （3）
- 専門家の回答
みんなの回答
- ORUKA1951
- ベストアンサー率45% (5062/11036)
確認しました。そのノードを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)
プルダウンメニューの仕組みはご理解いただけているとして。 ＞手つかずですがhttp://ameblo.jp/yuzu-oilです。 には、プルダウンすべきリストすらありません。
- ORUKA1951
- ベストアンサー率45% (5062/11036)
直前の質問 CSSでドロップダウンにしたいのですが - Webデザイン・CSS - 教えて！goo ( http://okwave.jp/qa/q7776610.html ) にきちんと順序だてて説明してありますから、まずそれを確認してください。
補足
確認させて頂きました。 webで調べてみたり、提示してもらったURLを見ても どこがおかしいのはわかりませんでした…。 アメブロの仕様が変わったから旧CSSやフリープラグイン、スペースなどを新CSS全てコピー貼り付けを してもダメなのでしょうか。 あと何か記述がおかしいという個所があれば教えていただけますでしょうか。
補足
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、フリースペース、フリープラグインそれぞれに どのような記述をすればいいでしょうか。