<style>
/* Основной блок */
#dstabs{
position:relative;
width:500px;
height:300px;
}
/* Блок заголовков */
#dstabs h3{
padding:5px;
height:30px;
text-align:center;
border-top:2px solid blue;
border-left:2px solid blue;
border-right:2px solid blue;
}
h3 {
font-size:19px;
}
.tabcontent{
padding:10px 30px 10px 30px;
width:100%;
background:transparent;
border:2px solid blue;
}
/* Первый блок */
#tab1 .tabcontent{
z-index:2;
position:absolute;
left:0;
top:43px;
bottom:20px;
background:transparent;
height:300px;
}
/* Блок 1 с заголовком */
#tab1 h3{
z-index:3;
width:250px;
position:absolute;
left:0;
top:0;
background:green;
}
/* Второй блок */
#tab2 .tabcontent{
z-index:1;
position:absolute;
left:0;
top:43px;
bottom:20px;
height:300px;
}
/* Блок 2 с заголовком */
#tab2 h3{
width:250px;
position:absolute;
left:300px;
top:0;
background:red;
}
#dstabs:hover h3,
#dstabs:focus h3,
#dstabs:active h3{
background:none;
}
/* Блок 1 с заголовком при нведении */
#tab1:hover h3,
#tab1:focus h3,
#tab1:active h3{
z-index:4;
background:red;
}
/* Блок 1 при нведении */
#tab1:hover .tabcontent,
#tab1:focus .tabcontent,
#tab1:active .tabcontent{
z-index:3;
background:transparent;
}
/* Блок 2 с заголовком при нведении */
#tab2:hover h3,
#tab2:focus h3,
#tab2:active h3{
z-index:4;
background:green;
}
/* Блок 2 при нведении */
#tab2:hover .tabcontent,
#tab2:focus .tabcontent,
#tab2:active .tabcontent{
z-index:3;
background:transparent;
}
#tab2 .tabcontent{
z-index:1;
position:absolute;
left:0;
top:43px;
bottom:20px;
height:300px;
opacity:0;
}
#dstabs:hover .tabcontent,
#tabs:focus .tabcontent,
#tabs:active .tabcontent{
opacity:0;
-o-transition : opacity .75s ease-in;
-ms-transition : opacity .75s ease-in;
-webkit-transition : opacity .75s ease-in;
transition : opacity .75s ease-in;
}
#tab1:hover .tabcontent,
#tab1:focus .tabcontent,
#tab1:active .tabcontent{
z-index:3;
background:transparent;
opacity:1;
-o-transition : opacity 2s ease-in;
-ms-transition : opacity 2s ease-in;
-webkit-transition : opacity 2s ease-in;
transition : opacity 2s ease-in;
}
#tab2:hover .tabcontent,
#tab2:focus .tabcontent,
#tab2:active .tabcontent{
z-index:3;
background:transparent;
opacity:1;
-o-transition : opacity 2s ease-in;
-ms-transition : opacity 2s ease-in;
-webkit-transition : opacity 2s ease-in;
transition : opacity 2s ease-in;
}
</style>
<div id="dstabs">
<div id="tab1">
<h3>Полезное1</h3>
<ul class="tabcontent">
Здесь контент
Для первой вкладки
</ul>
</div>
<div id="tab2">
<h3>Полезное2</h3>
<ul class="tabcontent">
Здесь контент
Для второй вкладки
</ul>
</div>
</div>