ほぼ自分用メモなので内容が乱暴なのはご勘弁を。
意外と情報が無いので紹介します。
このサイトのメニュー部分は当初、HTMLが下記コード内容で記載されていました。
<div id="menu">
<div id="wrap_menu">
<div id="navigation">
<var>navigation[1|2|3]</var>
</div>
</div>
</div>
また、CSSは下記コードで記載されていました。
#menu
{
clear: both;
display: block;
background:#222222;
border-bottom: 5px solid #CD691E;
}
#wrap_menu
{
clear: both;
display: block;
margin:0 auto;
width: 1000px;
}
※navigationや2階層目非表示CSSは省略しています。
※2012年9月時点、背景設定等は異なりますが、ほぼ同じコードを使用しています。
上記CSSでは、menu部分がうまく動作しませんでした。
原因を調べていくうち、どうやら「#navigation」部分のCSSに設定した「float」が原因という事が分かりました。
そこでCSSを下記の様に修正しました。
#menu
{
clear: both;
display: block;
background:#222222;
border-bottom: 5px solid #CD691E;
}
/* start: clearfix ------------------------------ */
#menu:after {
content:".";
display:block;
height:0px;
clear:both;
visibility:hidden;
}
#menu { display:inline-table; }
/* Hides from Mac IE \*/
* html #menu { height:1px; }
#menu { display:block; }
/* */
/* end: clearfix ------------------------------ */
#wrap_menu
{
clear: both;
display: block;
margin:0 auto;
width: 1000px;
}
「clearfix」というCSSを追加したところ、無事反映しました。
Jimdoでのメニュー制作や、その他CSSのご参考にご活用ください。
参考にしたサイト（より詳しく専門的に書いてあります）
＜BLOG × WORLD ENDING＞
http://blog.worldending.jp/web/clearfix.php
※2012年9月時点、サイトが表示されないためリンクを削除しています。
Jimdoのメニューを横レイアウトにするときはこちらのサイトが参考になります
＜Jimdoでつくる簡単ホームページ＞
http://jp-m.jimdo.com/
コメントをお書きください