JSFiddle - React, Tailwind, and code Playground

by Johan Muller

HTML

<div class="footer__nav">
    
    <div class="footer__nav__a">
        <div class="footer__label">
            о баре
        </div>
        <div class="footer__nav__inner">
            <a href="#">пресса о нас</a>
            <a href="#">отзывы</a>
            <a href="#">вакансии</a>
        </div>        
    </div>
    
    <a class="footer__nav__a active" href="#">
        <div class="footer__label">
            события
        </div>     
    </a>
    
    <div class="footer__nav__a">
        <div class="footer__label">
            Меню
        </div>
        <div class="footer__nav__inner">
            <a href="#">напитки</a>
            <a href="#">еда</a>
        </div>        
    </div>
    
    <div class="footer__nav__a">
        <div class="footer__label">
            Медиагалерея
        </div>
        <div class="footer__nav__inner">
            <a href="#">события</a>
            <a href="#">интерьер</a>
            <a href="#">панорама</a>
            <a href="#">коктейли</a>
            <a href="#">видео</a>
        </div>        
    </div>
    
    <a class="footer__nav__a" href="#">
        <div class="footer__label">
            Контакты
        </div>   
    </a>
    
    
    
</div>

CSS

body,html { position: relative; width: 100%; height: 100%; margin: 0; }

.footer__nav {
    position: absolute;
    left: 0px; bottom: 0px;
    display: block;
    background: #ccc;
    width: 940px;
    height: 70px;
    text-align: center;
}

.footer__nav:before {
    content: '';
    position: absolute;
    top: 0px; left: 0px;
    width: 100%; height: 5px;
    background: #aaa;
    z-index: 10;
}

.footer__nav__a {
    position: relative;
    display: inline-block;
    width: 130px; height: 60px;
    
    background: yellow;
}

.footer__nav__a:before {
    content: '';
    position: absolute;
    top: 0px; left: 0px;
    width: 100%; height: 5px;
    background: #aaa;
    z-index: 30;
}

.footer__nav__inner {
    position: absolute;
    display: block;;
    bottom: 0%; left: 0%;
    width: 100%;
    background: red;
    z-index: 5;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s 0s;
    
}

.footer__nav__inner a {
 display: block;

}

.footer__label {
    position: absolute;
    display: block;
    top: 0px; left: 0px;
    width: 100%; height: 70px;
    line-height: 70px;
    background: #ccc;
    z-index: 10;
}

.footer__nav__a:hover > .footer__nav__inner {
    bottom: 100%;
    visibility: visible;
    opacity: 1;

}

.active > .footer__label {
    background: blue;
}

.active:before {
    background: red;
}