はじめに
ヘッダ部分のメニューをドロップダウンメニューに変更しました。ドロップダウンメニューは以下のサイトを参考にアメーバように修正しました。
CSSで作ったドロップダウンメニューのドロップの動きいろいろl
変更箇所は以下の通り。
サイドバーを固定しメニューが乱れないようにし，ヘッダ部分にメニューを移動するように.dropmenu部分で指定してます。
/* サイドバーを固定しメニューが崩れないように調整 */
#subAInner{
position:static!important;
margin-top: 10px!important;
}/* オリジナル部分の修正箇所*/
.dropmenu {
margin:0;
padding:0;
width:1120px;
position:absolute;
top: 0px;
z-index: 100;
margin: -140px 0 10px -770px; /* 位置調整*/
*zoom: 1;
list-style-type: none;
}
参考：私のHTML部分
<ul id="fade-in2" class="dropmenu">
<li><a href="http://ameblo.jp/qelab">ホーム</a>
<ul>
<li><a href="http://profile.ameba.jp/qelab/" target="_blank" >プロフィール</a></li>
<li><a href="http://ameblo.jp/qelab/entry-12142452037.html" >リンクと免責</a></li>
</ul>
</li>
<li><a href="http://ameblo.jp/qelab/entrylist.html" >CSS:基本</a>
<ul>
<li><a href="http://ameblo.jp/qelab/entry-12143716226.html">記事内でHTML入力</a></li>
<li><a href="http://ameblo.jp/qelab/entry-12142446248.html">影付き枠</a></li>
</ul>
</li>
<li><a href="" >CSS:ヘッダ部分</a>
<ul>
<li><a href="http://ameblo.jp/qelab/entry-12144067783.html">オリジナルヘッダーメニュー：新CSSカスタム</a></li>
<li><a href="http://ameblo.jp/qelab/entry-12143900044.html">ヘッダ部分の編集</a></li>
</ul>
</li>
<li><a href="">CSS:調査</a>
<ul>
<li><a href="http://ameblo.jp/qelab/entry-12143188855.html">CSS編集ツール：リアルタイムにCSSが編集して確認できる</a></li>
<li><a href="http://ameblo.jp/qelab/entry-12143315123.html">WEB DEVELOPER</a></li>
</ul>
</li>
<li><a href="">予約中</a></li>
</ul>
参考：私のCSS
/*--------------------------------------------------
* ヘッダ部分のナビゲーションメニュー
*--------------------------------------------------*//* サイドバーを固定しメニューが崩れないように調整 */
#subAInner{
position:static!important;
margin-top: 10px!important;
}
/* ドロップメニュー基本*/
.dropmenu {
margin:0;
padding:0;
width:1120px;
position:absolute;
top: 0px;
z-index: 100;
margin: -140px 0 10px -770px; /* 位置調整*/
*zoom: 1;
list-style-type: none;
}
.dropmenu:before, .dropmenu:after{
content: "";
display: table;
}
.dropmenu:after{
clear: both;
}
.dropmenu li{
position: relative;
width: 20%;
float: left;
margin: 0;
padding: 0;
text-align: center;
}
.dropmenu li a{
display: block;
margin: 0;
padding: 15px 0 11px;
background: #000000;
color: #fff;
font-size: 14px;
line-height: 1;
text-decoration: none;
}
.dropmenu li ul{
list-style: none;
position: absolute;
z-index: 9999;
top: 100%;
left: 0;
margin: 0;
padding: 0;
}
.dropmenu li ul li{
width: 100%;
}
.dropmenu li ul li a{
padding: 13px 15px;
border-top: 1px solid #7c8c0e;
/* background: #6e7c0c; */
text-align: left;
}
.dropmenu li:hover > a{
background: #cccccc;
color:#000000;
}
.dropmenu li a:hover{
background: #cccccc;
color:#000000;
}/* アニメーションなし*/
#normal li ul{
display: none;
}
#normal li:hover ul{
display: block;
}/* 広がるように*/
#dropmenu li ul li{
overflow: hidden;
height: 0;
transition: .2s;
}
#dropmenu li:hover ul li{
overflow: visible;
height: 38px;
}
/* フェードインでおりてくる*/
#fade-in2 li ul{
opacity: 0;
top: 50%;
visibility: hidden;
transition: .5s;
}
#fade-in2 li:hover ul{
top: 100%;
visibility: visible;
opacity: 1;
}