Код:
<!--HTML-->
<div class="htmldemo">
<center>
<img width="650px" src="http://funkyimg.com/i/2HbXK.gif">
<center>
<br><div style="margin-top: -35px; font-family: 'good vibes pro'; font-size: 70px;line-height: 50%; letter-spacing: 1px; color: #a89f98; text-shadow: 2px 0px 0px #372839; word-spacing: -2px; ">Список ролей</div>
</center>
Код:
<!--HTML-->
<script type="text/javascript"> 
$(document).ready(function() {
$("td.#MenuTxT div.submenutext").hide();
<!--$(".tabs a:first").addClass("active").show(); -->
$("td.#MenuTxT div.submenutext:first").show();
$("div.#menu a").click(function() {
    $("div.#menu a").removeClass("tabactive");
    $(this).addClass("tabactive");
    $("td.#MenuTxT div.submenutext").hide();
    var activeDiv = $(this).attr("alt");
    $("div."+activeDiv).fadeIn();
    return false; });
});
</script>
<!-- Таблица -->
<style>

#menu {
    margin-left: 5%;
    margin-top: 20px;
    text-align: center;
    width: 650px;
}
#menu span {
    background-color: #1b89fa;
    border-left: 1px solid #4cb9e7;
    border-radius: 20px;
    border-right: 1px solid #4ca0e7;
    border-top: 1px solid #4ca0e7;
    box-shadow: 2px -1px 1px #b5eefc, 0 0 10px #2d9cd0 inset;
    color: #e3f3fc;
    display: inline-block;
    font-family: lobster;
    font-size: 16px;
    margin: 7px;
    padding: 3px 18px;
}
#menu .tabactive {
    background: #a0b3c9 none repeat scroll 0 0;
    transition-duration: 0.3s;
}
#submenu {
    background-color: #e0ddd9;
    border-radius: 2px;
    box-shadow: 0 0 15px #cbc7c2 inset;
    height: 512px;
    overflow-y: auto;
    text-align: center;
    width: 500
.submenutext {
    display: none;
    height: 40px;
}
</style>
<table id=tablean"> 
<tbody> 
<tr> 
<td> 
<!-- Пункты меню-->
<div id="menu">
<a alt=#sm1 "style="cursor: pointer;"><img src="http://funkyimg.com/i/2Hek7.png"></a> 
<a alt=#sm2 "style="cursor: pointer;"><img src="http://funkyimg.com/i/2Heka.png"></a> 
<a alt=#sm3 "style="cursor: pointer;"><img src="http://funkyimg.com/i/2Hek8.png"></a>
<a alt=#sm4 "style="cursor: pointer;"><img src="http://funkyimg.com/i/2Hek9.png"></a>
<a alt=#sm5 "style="cursor: pointer;"><img src="http://funkyimg.com/i/2JbcV.png"></a>
</div> 
<!-- Конец пунктов меню-->
</td> 
</tr> 
<tr> 
<td id="MenuTxT"  align="center" valign="top"> 
<div id="submenu" align="center"> 
<div id="sm1" class="submenutext" style="display:block; text-align: left;">
<center><!-- Блок новостей с прокруткой-->
<div class="overflow" style="height: 270px; width: 680px"> 

<br>
<center><img src="http://funkyimg.com/i/2HfR2.jpg"></center>
<div style="margin-top: -80px; margin-left: -350px; font-family: 'Arial'; font-size: 12px; letter-spacing: 1px; color: #f3f5fa; ">
<b>Директор:</b>
<br>
<b>Заместитель:</b><br>
<b>Количество персонала:</b>
</div>
<br>

<br>
<table><tr>
<td><center>●<a href="">---------</a><br>
---------<br>
<b>Преподаватель боевых искусств.</b>
</center></td>
<td><center>●<a href="http://aeternitas.f-rpg.ru/profile.php?section=essentials&id=418">Райден Игараси</a><br>
Оками, 38 лет<br>
<b>Преподаватель стихийной магии (воды)</b>
</center></td></tr>
<tr>
<td><center>●<a href="">---------</a><br>
---------<br>
<b>Помощник преподавателя по Боевым искусствам</b>
</center></td>
<td><center>●<a href="">---------</a><br>
---------<br>
<b>Преподаватель Мифологии</b>
</center></td></tr>
<tr>
<td><center>●<a href="">---------</a><br>
---------<br>
<b>Преподаватель Рунной магии</b>
</center></td>
<td><center>●<a href="">---------</a><br>
---------<br>
<b>Преподаватель Белой магии</b>
</center></td></tr>
<tr>
<td><center>●<a href="">---------</a><br>
---------<br>
<b>Преподаватель Магии огня</b>
</center></td>
<td><center>●<a href="">---------</a><br>
---------<br>
<b>Преподаватель Магии воздуха</b>
</center></td></tr>
<tr>
<td><center>●<a href="">---------</a><br>
---------<br>
<b>Преподаватель Магии Земли</b>
</center></td>
<td><center>●<a href="">---------</a><br>
---------<br>
<b>Преподаватель Магии энергии</b>
</center></td></tr>
<tr>
<td><center>●<a href="">---------</a><br>
---------<br>
<b>Преподаватель Физкультуры</b>
</center></td>
<td><center>●<a href="">---------</a><br>
---------<br>
<b>Преподаватель Философии</b>
</center></td></tr>
<tr>
<td><center>●<a href="">---------</a><br>
---------<br>
<b>Преподаватель Астрономии</b>
</center></td>
<td><center>●<a href="">---------</a><br>
---------<br>
<b>Преподаватель Травологии</b>
</center></td></tr>
<tr>
<td><center>●<a href="">---------</a><br>
---------<br>
<b>Преподаватель Артефакторики</b>
</center></td>
<td><center>●<a href="">---------</a><br>
---------<br>
<b>Преподаватель Истории</b>
</center></td></tr>
<tr>
<td><center>●<a href="">---------</a><br>
---------<br>
<b>Преподаватель Этикета</b>
</center></td>
<td><center>●<a href="">---------</a><br>
---------<br>
<b>Преподаватель Нумерологии</b>
</center></td></tr>
<tr>
<td><center>●<a href="">---------</a><br>
---------<br>
<b>Преподаватель по изучению магических существ</b>
</center></td>
<td><center>●<a href="">---------</a><br>
---------<br>
<b>Преподаватель Психологии</b>
</center></td></tr>
<tr>
<td><center>●<a href="">---------</a><br>
---------<br>
<b>Преподаватель Анатомии и физиологии</b>
</center></td>
<td><center>●<a href="">---------</a><br>
---------<br>
<b>Преподаватель Мастерства разведки</b>
</center></td></tr>
<tr>
<td><center>●<a href="">---------</a><br>
---------<br>
<b>Преподаватель Теневедения</b>
</center></td>
<td><center>●<a href="">---------</a><br>
---------<br>
<b>Преподаватель Алхимии</b>
</center></td></tr>
<tr>
<td><center>●<a href="">---------</a><br>
---------<br>
<b>Преподаватель Основ выживания</b>
</center></td>
<td><center>●<a href="">---------</a><br>
---------<br>
<b>Преподаватель ЗОТИ</b>
</center></td></tr>
<tr>
<td><center>●<a href="">---------</a><br>
---------<br>
<b>Преподаватель Древних текстов</b>
</center></td>
<td><center>●<a href="">---------</a><br>
---------<br>
<b>Преподаватель Археологии и древних цивилизаций</b>
</center></td></tr>
<tr>
<td><center>●<a href="">---------</a><br>
---------<br>
<b>Преподаватель Криптологии и криптографии</b>
</center></td>
<td><center>●<a href="">---------</a><br>
---------<br>
<b>Преподаватель Гербологии</b>
</center></td></tr>
<tr>
<td><center>●<a href="">---------</a><br>
---------<br>
<b>Преподаватель Целительства</b>
</center></td>
<td><center>●<a href="">---------</a><br>
---------<br>
<b>Преподаватель Зельеварения</b>
</center></td>
</tr>
</table>

<center><b>ПЕРСОНАЛ</b></center><br>

<table>
<tr>
<td><center>●<a href="">---------</a><br>
---------<br>
<b>Начальник Охраны</b>
</center></td>
<td><center>●<a href="">---------</a><br>
---------<br>
<b>Охрана</b>
</center></td></tr>
<tr>
<td><center>●<a href="">---------</a><br>
---------<br>
<b>Психолог</b>
</center></td>
<td><center>●<a href="">---------</a><br>
---------<br>
<b>Повар</b>
</center></td></tr>
<tr>
<td><center>●<a href="">---------</a><br>
---------<br>
<b>Комендант Академии</b>
</center></td>
<td><center>●<a href="">---------</a><br>
---------<br>
<b>Комендант Женского общежития</b>
</center></td></tr>
<tr>
<td><center>●<a href="">---------</a><br>
---------<br>
<b>Комендант Мужского общежития</b>
</center></td>
<td><center>●<a href="">---------</a><br>
---------<br>
<b>Комендант Преподавательского общежития</b>
</center></td></tr>
<tr>
<td><center>●<a href="">---------</a><br>
---------<br>
<b>Библиотекарь</b>
</center></td>
<td><center>●<a href="">---------</a><br>
---------<br>
<b>Секретарь директора</b>
</center></td></tr>
<tr>
<td><center>●<a href="">---------</a><br>
---------<br>
<b>Архивариус</b>
</center></td>
<td><center>●<a href="">---------</a><br>
---------<br>
<b>Тренер по скифту</b>
</center></td></tr>
</table>




</div> 
<br>
</div>

<!-- Конец блока новостей с прокруткой-->




<!-- Навигационные ссылки-->

<div id="sm2" class="submenutext">
<br>
<center><img src="http://funkyimg.com/i/2HfQY.jpg"></center>
<div style="margin-top: -85px; margin-left: -350px; font-family: 'Arial'; font-size: 12px; letter-spacing: 1px; color: #f3f5fa; ">
<b>Декан:</b> <a href="http://aeternitas.f-rpg.ru/profile.php?section=essentials&id=418">Райден Игараси</a>
<br>
<b>Староста:</b><br>2016-2018 г. - <a href="http://aeternitas.f-rpg.ru/profile.php?id=2">Эммелин Шерман</a><br>
2019 г. - ....<br>
<b>Количество студентов:</b>
</div>
<br><br><br><br>


<br>
<center><div style="margin-top: -35px; font-family: 'good vibes pro'; font-size: 30px;line-height: 50%; letter-spacing: 1px; color: #a89f98; text-shadow: 2px 0px 0px #372839; word-spacing: -2px; ">1 курс</div>
</center><br>
<table><tr>
<td><center><b>Люди:<b></center></td>
<td><center><b>Мононоке:<b></center></td>
</tr></table>

<br>
<center><div style="margin-top: -35px; font-family: 'good vibes pro'; font-size: 30px;line-height: 50%; letter-spacing: 1px; color: #a89f98; text-shadow: 2px 0px 0px #372839; word-spacing: -2px; ">2 курс</div>
</center><br>
<table><tr>
<td><center><b>Люди:<b></center></td>
<td><center><b>Мононоке:<b></center></td>
</tr></table>

<br>
<center><div style="margin-top: -35px; font-family: 'good vibes pro'; font-size: 30px;line-height: 50%; letter-spacing: 1px; color: #a89f98; text-shadow: 2px 0px 0px #372839; word-spacing: -2px; ">3 курс</div>
</center><br>
<table><tr>
<td><center><b>Люди:<b></center></td>
<td><center><b>Мононоке:<b></center></td>
</tr></table>

<br>
<center><div style="margin-top: -35px; font-family: 'good vibes pro'; font-size: 30px;line-height: 50%; letter-spacing: 1px; color: #a89f98; text-shadow: 2px 0px 0px #372839; word-spacing: -2px; ">4 курс</div>
</center><br>
<table><tr>
<td><center><b>Люди:<b></center></td>
<td><center><b>Мононоке:<b></center></td>
</tr></table>

<br>
<center><div style="margin-top: -35px; font-family: 'good vibes pro'; font-size: 30px;line-height: 50%; letter-spacing: 1px; color: #a89f98; text-shadow: 2px 0px 0px #372839; word-spacing: -2px; ">5 курс</div>
</center><br>
<table><tr>
<td><center><b>Люди:<b></center></td>
<td><center><b>Мононоке:<b></center></td>
</tr></table>
 

</div> 
<!-- Конец навигационных ссылок -->


<!-- ДЗ -->
<div id="sm3" class="submenutext">
<br>
<center><img src="http://funkyimg.com/i/2HfQZ.jpg"></center>
<div style="margin-top: -80px; margin-left: -350px; font-family: 'Arial'; font-size: 12px; letter-spacing: 1px; color: #f3f5fa; ">
<b>Декан:</b>
<br>
<b>Староста:</b><br>
<b>Количество студентов:</b>
</div>
<br><br><br><br>


<br>
<center><div style="margin-top: -35px; font-family: 'good vibes pro'; font-size: 30px;line-height: 50%; letter-spacing: 1px; color: #a89f98; text-shadow: 2px 0px 0px #372839; word-spacing: -2px; ">1 курс</div>
</center><br>
<table><tr>
<td><center><b>Люди:<b></center></td>
<td><center><b>Мононоке:<b></center></td>
</tr></table>

<br>
<center><div style="margin-top: -35px; font-family: 'good vibes pro'; font-size: 30px;line-height: 50%; letter-spacing: 1px; color: #a89f98; text-shadow: 2px 0px 0px #372839; word-spacing: -2px; ">2 курс</div>
</center><br>
<table><tr>
<td><center><b>Люди:<b></center></td>
<td><center><b>Мононоке:<b></center></td>
</tr></table>

<br>
<center><div style="margin-top: -35px; font-family: 'good vibes pro'; font-size: 30px;line-height: 50%; letter-spacing: 1px; color: #a89f98; text-shadow: 2px 0px 0px #372839; word-spacing: -2px; ">3 курс</div>
</center><br>
<table><tr>
<td><center><b>Люди:<b></center></td>
<td><center><b>Мононоке:<b></center></td>
</tr></table>

<br>
<center><div style="margin-top: -35px; font-family: 'good vibes pro'; font-size: 30px;line-height: 50%; letter-spacing: 1px; color: #a89f98; text-shadow: 2px 0px 0px #372839; word-spacing: -2px; ">4 курс</div>
</center><br>
<table><tr>
<td><center><b>Люди:<b></center></td>
<td><center><b>Мононоке:<b></center></td>
</tr></table>

<br>
<center><div style="margin-top: -35px; font-family: 'good vibes pro'; font-size: 30px;line-height: 50%; letter-spacing: 1px; color: #a89f98; text-shadow: 2px 0px 0px #372839; word-spacing: -2px; ">5 курс</div>
</center><br>
<table><tr>
<td><center><b>Люди:<b></center></td>
<td><center><b>Мононоке:<b><br>
<a href="http://aeternitas.f-rpg.ru/profile.php?id=750">Изольда Сиградд, 20 y.o</a></center></td>
</tr></table>


</div>

<!-- Конец блока об игре -->

<!-- Ранги-->

<div id="sm4" class="submenutext">
<br>
<center><img src="http://funkyimg.com/i/2HfR1.jpg"></center>
<div style="margin-top: -80px; margin-left: -350px; font-family: 'Arial'; font-size: 12px; letter-spacing: 1px; color: #f3f5fa; ">
<b>Декан:</b>
<br>
<b>Староста:</b><br>
<b>Количество студентов:</b>
</div>
<br><br><br><br>


<br>
<center><div style="margin-top: -35px; font-family: 'good vibes pro'; font-size: 30px;line-height: 50%; letter-spacing: 1px; color: #a89f98; text-shadow: 2px 0px 0px #372839; word-spacing: -2px; ">1 курс</div>
</center><br>
<table><tr>
<td><center><b>Люди:<b></center></td>
<td><center><b>Мононоке:<b></center></td>
</tr></table>

<br>
<center><div style="margin-top: -35px; font-family: 'good vibes pro'; font-size: 30px;line-height: 50%; letter-spacing: 1px; color: #a89f98; text-shadow: 2px 0px 0px #372839; word-spacing: -2px; ">2 курс</div>
</center><br>
<table><tr>
<td><center><b>Люди:<b></center></td>
<td><center><b>Мононоке:<b></center></td>
</tr></table>

<br>
<center><div style="margin-top: -35px; font-family: 'good vibes pro'; font-size: 30px;line-height: 50%; letter-spacing: 1px; color: #a89f98; text-shadow: 2px 0px 0px #372839; word-spacing: -2px; ">3 курс</div>
</center><br>
<table><tr>
<td><center><b>Люди:<b></center></td>
<td><center><b>Мононоке:<b></center></td>
</tr></table>

<br>
<center><div style="margin-top: -35px; font-family: 'good vibes pro'; font-size: 30px;line-height: 50%; letter-spacing: 1px; color: #a89f98; text-shadow: 2px 0px 0px #372839; word-spacing: -2px; ">4 курс</div>
</center><br>
<table><tr>
<td><center><b>Люди:<b></center></td>
<td><center><b>Мононоке:<b></center></td>
</tr></table>

<br>
<center><div style="margin-top: -35px; font-family: 'good vibes pro'; font-size: 30px;line-height: 50%; letter-spacing: 1px; color: #a89f98; text-shadow: 2px 0px 0px #372839; word-spacing: -2px; ">5 курс</div>
</center><br>
<table><tr>
<td><center><b>Люди:<b></center></td>
<td><center><b>Мононоке:<b></center></td>
</tr></table>


</div> 
<!-- Конец рангов -->

<!-- Город-->

<div id="sm5" class="submenutext">
<br>

<table>
<tr>
<td><center>● <a href="http://aeternitas.f-rpg.ru/profile.php?id=2">Эммелин Шерман</a><br>
21 год, кицунэ.<br>
<b>Детский психолог. Владелица детского приюта "Облако"</b>
</center></td>
<td><center>●<a href="">---------</a><br>
---------<br>
<b>Деятельность</b>
</center></td></tr>
</table>

</div> 
<!-- Конец города -->

</td> 
</tr> 
</tbody> 
</table>


</center>