2カラム サイドバー 04

このテンプレートで使っている画像です。

menu_back.gif

--- HTML ---
<div id="navi">
 <div class="menu">
 <h3>MENU</h3>
 <p><a href="">link-1</a></p>
 <p><a href="">link-2</a></p>
 <p><a href="">link-3</a></p>
 </div>

 <div class="submenu">
 <h3>SUBMENU</h3>
 <ul>
 <li>テキスト</li>
 <li>テキスト</li>
 </ul>
 </div>
</div>

--- CSS ---
#navi {
 float:left;
}

#navi .menu {
 width:158px;
 margin:0 10px 10px;
 border:1px solid #333;
}

#navi .menu h3 {
 margin:0;
 padding:6px 8px;
 color:#fff;
 background:#333 url(img/menu_back.gif) repeat-x;
 font-size:80%;
 line-height:1em;
}

#navi .menu p {
 margin:5px 8px;
 font-size:80%;
 line-height:1.32em;
}

#navi .submenu {
 margin:10px;
 width:158px;
 border:1px solid #333;
}

#navi .submenu h3 {
 margin:0;
 padding:8px;
 color:#cc0000;
 font-size:80%;
 line-height:1em;
}

#navi ul {
 margin:0;
 padding:0;
}

#navi li {
 margin:0 8px 5px;
 font-size:80%;
 line-height:1.32em;
}