2カラム サイドバー 03

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

menu_bar.gif

--- HTML ---
<div id="navi">
 <div class="menu">
 <h3><img src="img/menu_bar.gif" alt="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><img src="img/menu_bar.gif" alt="SUBMENU"></h3>
 <p><a href="">link-4</a></p>
 <p><a href="">link-5</a></p>
 <p><a href="">link-6</a></p>
 <p><a href="">link-7</a></p>
 </div>
</div>

--- CSS ---
#navi {
 float:left;
}
#navi h3 {
 margin:0;
}

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

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

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

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