2カラム サイドバー 01

--- 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>
 <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 0 7px 0;
 color:#cc0000;
 font-size:80%;
 line-height:1em;
}

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

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

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

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