<style>
#menu span {
padding: 7px 15px 7px;
margin-right: 5px;
margin: 10px 0;
width: 100px;
text-decoration: none;
}
#menu .tabactive {
color: #e3d0a6;
background: transparent;
}

.btn{
      display: block;
      width: 251px;
      height: 47px;
      background: url('http://images.vfl.ru/ii/1338660400/58b8b53c/593709.png') 0 0px no-repeat;
    }

    .btn:hover{
      background: url('http://images.vfl.ru/ii/1338660433/806200af/593711.png') 0 0px no-repeat;
    }

    .btn:focus{
      background: url('http://images.vfl.ru/ii/1338660485/5ed0f663/593717.png') 0 0px no-repeat;
    }

#submenu {
padding: 5px;
height: 280px;
font-size: 11px;
width: 800px;
}

.submenutext {
display: none;
height: 60px;
}
</style>

<style type="text/css">
#menu {
padding-left: 20px;
}

#menu a {
padding: 7px 30px 7px;
margin-right: 5px;
display: block;
margin: 10px 0;
width: 100px;
text-decoration: none;
}

#submenu {
padding: 5px;
height: 100px;
text-align: center;
font-size: 12px;
width: 700px;
}

.submenutext {
display: none;
height: 60px;
}

#submenu A {
color: #CCC;
}
#menu .tabactive {
color: #65065f;
}
</style>
<script type="text/javascript">
var prevmenu, prevtab
function subMenu(obj, menu) {
if (document.getElementById) {
if (prevmenu) document.getElementById(prevmenu).style.display = "none"
document.getElementById(menu).style.display = "block"
if (prevtab) { prevtab.className = "" }
obj.className = "tabactive"
prevmenu = menu
prevtab = obj
}
}
</script>
<table style="width: 100%;" border="1">
<tbody>
<tr>
<td style="width: 25%;">
<div id="menu">
<a onclick="subMenu(this,'sm1')" href="#">заголовок</a>
<a onclick="subMenu(this,'sm2')" href="#">заголовок</a>
<a onclick="subMenu(this,'sm3')" href="#">заголовок</a>
<a onclick="subMenu(this,'sm4')" href="#">заголовок</a>
<a onclick="subMenu(this,'sm5')" href="#">заголовок</a></div>
</td>
<td align="center">
<div id="submenu">
<div id="sm1" class="submenutext"><br /><br />текст</div>
<div id="sm2" class="submenutext"><br /><br />текст</div>
<div id="sm3" class="submenutext"><br /><br />текст</div>
<div id="sm4" class="submenutext"><br /><br />текст</div>
<div id="sm5" class="submenutext"><br /><br />текст</div>
</div>
</td>
</tr>
</tbody>
</table>

<!--Спойлер - контейнер-->
<script type="text/javascript">
  $(document).ready(function(){
    $('.splLink').click(function(){
      var aaa=$(this).parent().children("div.splCont")
      $('.spll').find('div.splCont.Active').each(function(){
if($(this).html()!=aaa.html()){$(this).removeClass('Active').hide('normal');}
      });
      $(this).parent().children("div.splCont").addClass('Active').toggle('normal');
      return false;
    });
});
</script>