/* ОБЩИЕ СТИЛИ ПАНЕЛЕЙ */
.panel-1, .panel-2, .panel-3 {
position: absolute;
top: 0;
height: 100%;
transition: all .35s ease;
cursor: pointer;
}
/* --- СТАРТОВОЕ СОСТОЯНИЕ --- */
/* К1 – ОТКРЫТА МАКСИМАЛЬНО */
.panel-1 {
left: 0;
width: 60%; /* широкая */
z-index: 10;
}
/* К2 – УЗКАЯ */
.panel-2 {
left: 60%;
width: 20%;
z-index: 9;
}
/* К3 – УЗКАЯ */
.panel-3 {
left: 80%;
width: 20%;
z-index: 8;
}
/* --- НАВЕДЕНИЕ НА К2 --- */
/* К2 становится широкой и НАКРЫВАЕТ К1 */
.panel-2:hover {
left: 0;
width: 60%;
z-index: 20;
}
/* К3 уезжает правее */
.panel-2:hover ~ .panel-3 {
left: 60%;
width: 40%;
}
/* --- НАВЕДЕНИЕ НА К3 --- */
/* К3 становится широкой и НАКРЫВАЕТ К2 и К1 */
.panel-3:hover {
left: 0;
width: 60%;
z-index: 30;
}