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

締切済

質問者：yuzucocco
質問日時：2012/11/01 16:34
回答数：3件

アメブロ新規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/yuz …
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/yuz …
}
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-transitio …
<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. …
<script type="text/javascript">

$(function(){
$("ul.menu li").hover(function(){
$(">ul:not(:animated)",this).slideDown("fast");
},
function(){
$(">ul",this).slideUp("fast");
});
});
</script>

にしてあります。
回答よろしくお願いいたします。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (3件)

最新から表示
回答順に表示

No.3

回答者： ORUKA1951
回答日時：2012/11/07 18:25

確認しました。

そのノードを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のもの
　

- 0
- 件

通報する

No.2

回答者： ORUKA1951
回答日時：2012/11/06 19:06

プルダウンメニューの仕組みはご理解いただけているとして。

＞手つかずですがhttp://ameblo.jp/yuzu-oilです。
　には、プルダウンすべきリストすらありません。

この回答への補足

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、フリースペース、フリープラグインそれぞれに
どのような記述をすればいいでしょうか。

補足日時：2012/11/07 16:37

通報する

- 0
- 件

通報する

No.1

回答者： ORUKA1951
回答日時：2012/11/01 18:44

直前の質問

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

この回答への補足

確認させて頂きました。

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

補足日時：2012/11/06 15:50

通報する