kód:
<style type="text/css">
.belgarath { width: 500px; height: 500px; padding: 20px; position: relative; background-image: url(//jegvirag.gportal.hu/portal/jegvirag/image/gallery/1587029329_75.jpg); border: 2px solid #703E3B; }
.belgarion { float: left }
.belgarion label { background: #D3C8B4; width: 140px; padding: 15px 10px 15px 10px; position: absolute; top: 230px; left: 20px; color: #C84648; text-transform: uppercase; }
.belgarion [type=radio] { display: none; }
.beldaran { width: 490px; height: 190px; border: 5px solid #D3C8B4; position: absolute; top: 20px; left: 20px; background-image: url(//jegvirag.gportal.hu/portal/jegvirag/image/gallery/1587029557_41.jpg); }
.polgara { width: 450px; height: 140px; position: absolute; top: 330px; left: 20px; background: #E7E4D5; overflow: auto; padding: 20px; font-size: 10px; text-align: justify; color: #703E3B; border: double 5px #703E3B; }
.polgara::-webkit-scrollbar { width: 2px; height: 2px; }
.polgara::-webkit-scrollbar-track { background-color: #D3C8B4; }
.polgara::-webkit-scrollbar-thumb { background-color: #C84648; }
.cenedra, .cenedra a { position: absolute; bottom: 2px; right: 2px; color: #C84648; font-size: 20px; }
[type=radio]:checked ~ label { background: #FFF3DB; z-index: 2; }
[type=radio]:checked ~ label ~ .polgara { z-index: 1; }
</style>
<center><div class="belgarath"><div class="beldaran"></div><div class="cenedra"></div>
<div class="belgarion">
<input type="radio" id="tab-1" name="tab-group-1" checked>
<label for="tab-1">MENU</label>
<div class="polgara">
MENÜ1szovegszovegszoveg
</div>
</div>
<div class="belgarion">
<input type="radio" id="tab-2" name="tab-group-1">
<label for="tab-2" style="margin-left: 170px;">MENU</label>
<div class="polgara">
MENÜ2szovegszovegszoveg
</div>
</div>
<div class="belgarion">
<input type="radio" id="tab-3" name="tab-group-1">
<label for="tab-3" style="margin-left: 340px;">MENU</label>
<div class="polgara">
MENÜ3szovegszovegszoveg
</div>
</div>
<div class="belgarion">
<input type="radio" id="tab-4" name="tab-group-1">
<label for="tab-4" style="margin-top: 50px;">MENU</label>
<div class="polgara">
MENÜ4szovegszovegszoveg
</div>
</div>
<div class="belgarion">
<input type="radio" id="tab-5" name="tab-group-1">
<label for="tab-5" style="margin-left: 170px; margin-top: 50px;">MENU</label>
<div class="polgara">
MENÜ5szovegszovegszoveg
</div>
</div>
<div class="belgarion">
<input type="radio" id="tab-6" name="tab-group-1">
<label for="tab-6" style="margin-left: 340px; margin-top: 50px;">MENU</label>
MENÜ<div class="polgara">
MENU6SZOVEGSZOVEGSZOVEG
</div>
</div>
</div></center>
AJÁNLOM AZ OLDALT
Archívum