Код:
<!--HTML--><style type="text/css">
.dttcontainer { margin: 10px auto;  height: 320px;  overflow: hidden; width: 560px; }
.dttname{color: #fff;  text-align: center; padding: 10px 15px; font-family: bebas neue;  font-size: 25px; vertical-align: middle;}
.dttdesc{  font-size: 8px;  line-height: 100%;  vertical-align: middle;  text-decoration: none; }
.dtttabs { margin: 0px auto;  position: relative;   width: 560px;  height:  320px;

 background-image: url(http://i.imgur.com/8F2WZTS.png);

 background-position: 0px 20px;}
.dtttab { float: left; }
.dtttab label {  display: block;  width: 280px;  height: 20px;  background: #eee;  margin-left: 0px;  position: relative;  left: 0px;  top: 280px; font-family: arial;  font-size: 9px;  text-transform: lowercase;  letter-spacing: 1px;  line-height: 20px; text-align: center;  color: #828282; z-index: 9999;  -webkit-transition: all 0.7s ease;  -moz-transition: all 0.7s ease;  -ms-transition: all 0.7s ease;  -o-transition: all 0.7s ease;  transition: all 0.7s ease;}
.dtttab input[type=radio]:checked ~ label { color: #fff; z-index: 2;}
.dtttab input[type=radio] { display: none;}
.dttcontent { position: absolute; top: 355px; bottom: 20px; left: 0px; right: 0px; opacity: 1;  z-index: 5;  -webkit-transition: all 0.7s ease;  -moz-transition: all 0.7s ease;  -ms-transition: all 0.7s ease;  -o-transition: all 0.7s ease;  transition: all 0.7s ease;}
.dtttab input[type=radio]:checked ~ label ~ .dttcontent { z-index: 1;  opacity: 1;  top: 20px;}
.dtttitle{  font-family: 'bebas neue';  font-size: 16px; border-bottom: 1px solid;  line-height: 100%;  padding-bottom: 2px;  margin-bottom: 5px;}
.dttcontent a { text-decoration: none;}
.dttactive {width: 260px; overflow-y: auto; background-color: #fff;  height: 260px;  padding: 10px;  color: #000; line-height: 120%; opacity: 1;}
.dttcomp {width: 260px;  overflow-y: auto; background-color: #fff;  height: 260px;  padding: 10px;  color: #000; line-height: 120%;  position: relative;  left: 280px;  top: 0px; opacity: 1;}
.dttactive up {font-family: Bebas Neue; font-size: 12px; letter-spacing: 1px;}
.dttactive n {font-size: 11px; letter-spacing: 0px;}
.dttcomp up {font-family: Bebas Neue; font-size: 12px; letter-spacing: 1px;}
.dttcomp n {font-size: 11px; letter-spacing: 0px;}
.dttactive::-webkit-scrollbar { width: 5px; height: 5px; }
.dttactive::-webkit-scrollbar-track { width: 1px; background-color: #222; border: 2px solid #FFF; }
.dttactive::-webkit-scrollbar-thumb { background-color: #222; }
.dttcomp::-webkit-scrollbar { width: 5px; height: 5px; }
.dttcomp::-webkit-scrollbar-track { width: 1px; background-color: #222; border: 2px solid #FFF; }
.dttcomp::-webkit-scrollbar-thumb { background-color: #222; }
</style>

<div class="dttcontainer">
 
<div class="dtttabs"><div class="dtttab"><input type="radio" id="dtttab-1" name="dtttab-group-1" checked>  <label for="dtttab-1" style="background-color: #102311; top:0px; width:560px;height: auto; overflow:hidden;"><div class="dttname">



</div> </label><div class="dttcontent">  
 
</div></div><div class="dtttab"><input type="radio" id="dtttab-2" name="dtttab-group-1">  <label for="dtttab-2" style="background-color: #102311;"> имена </label>
<div class="dttcontent">
 <div class="dttactive">

<div class="dtttitle">имена</div>

<a href=http://lull.rusff.ru/profile.php?id=6><up>Arabella</up> // <n>Арабелла</n></a><br>
<a href=http://lull.rusff.ru/profile.php?id=52><up>Eira</up> // <n>Эйра</n></a><br>
<a href=http://lull.rusff.ru/profile.php?id=9><up>Rasthur</up> // <n>Растур</n></a><br>


 </div></div></div><div class="dtttab"><input type="radio" id="dtttab-3" name="dtttab-group-1"><label for="dtttab-3" style="background-color:#20293F; background-color: #102311;"> фамилии </label><div class="dttcontent">  <div class="dttcomp">

<div class="dtttitle">фамилии</div>

<a href=http://lull.rusff.ru/profile.php?id=6><up>Norton</up> // <n>Нортон</n></a><br>
<a href=http://lull.rusff.ru/profile.php?id=9><up>Shafiq</up> // <n>Шафик</n></a><br>



 </div></div></div>
</div></div>
Код:
<a href=ссылка на ваш профиль><up>Имя на английском</up> // <n>Имя на русском</n></a><br>
Код:
<a href=ссылка на ваш профиль><up>Фамилия на английском</up> // <n>Фамилия на русском</n></a><br>