CodePen Embed - jOYgNJb

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <header class="header">
        <div class="header__container">
            <div class="header-top">
                <div class="header-top__logo">INRES</div>
                <ul class="header-top__nav nav">
                    <li class="nav__item">
                        <a href="" class="nav__link">Главная</a>
                  </li>
    
                    <li class="nav__item">
                        <a href="" class="nav__link">Новости</a>
                    </li>
    
                    <li class="nav__item">
                        <a href="" class="nav__link">Форум</a>
                    </li>
                    
                    <li class="nav__item">
                        <a href="" class="nav__link">Личный кабинет</a>
                    </li>
                </ul>
            </div>
            <div class="header-bottom">
                <div class="header-bottom__nav">
                    <ul class="header-bottom__list">
                        <li class="header-bottom__item">
                            <div class="header-bottom__label">Мест</div>
                            <div class="header-bottom__progress"> <progress></progress> </div>
                        </li>
                        <li class="header-bottom__item">
                            <div class="header-bottom__label">Мест</div>
                            <div class="header-bottom__progress"> <progress></progress> </div>
                        </li>
                        <li class="header-bottom__item">
                            <div class="header-bottom__label">Мест</div>
                            <div class="header-bottom__progress"> <progress></progress> </div>
                        </li>
                        <li class="header-bottom__item">
                            <div class="header-bottom__label">Мест</div>
                            <div class="header-bottom__progress"> <progress></progress> </div>
                        </li>
                        <li class="header-bottom__item">
                            <div class="header-bottom__label">Мест</div>
                            <div class="header-bottom__progress"> <progress></progress> </div>
                        </li>
                        <li class="header-bottom__item">
                            <div class="header-bottom__label">Мест</div>
                            <div class="header-bottom__progress"> <progress></progress> </div>
                        </li>
                        <li class="header-bottom__item">
                            <div class="header-bottom__label">Мест</div>
                            <div class="header-bottom__progress"> <progress></progress> </div>
                        </li>
                        <li class="header-bottom__item">
                            <div class="header-bottom__label">Мест</div>
                            <div class="header-bottom__progress"> <progress></progress> </div>
                        </li>
                        <li class="header-bottom__item">
                            <div class="header-bottom__label">Мест</div>
                            <div class="header-bottom__progress"> <progress></progress> </div>
                        </li>
                    </ul>
                </div>
                <div class="monitoring">
                    <p>Прогресс</p>
                </div>
            </div>
        </div>
    </header>

    <script src="js/script.js"></script>
</body>
</html>

* {
  padding: 0;
  margin: 0;
}

body{
  height: 100vh;
}

button {
  cursor: pointer;
  border: 0;
  outline: 0;
}

ul li {
  list-style: none;
}

input{
  border: 0;
  outline: 0;
}


h1, h2, h3, h4, h5, h6 {
  font-size: inherit;
  font-weight: inherit;
}

a{
  text-decoration: none;
}

/*=======================================*/

.header {
    background: #fff;
    border-bottom: 1px solid #e2e2e2;
}
.header__container {
    width: 97%;
    margin: 0 auto;
    position: relative;
    z-index: 100;
}

.header-top {
    display: flex;
    align-items: center;
}

.header-top__logo {
    font-size: 1.9em;
    width: 100%;
    flex: 0 0 10%;
}
.header-top__nav {
    display: flex;
    gap: 25px;
    width: 100%;
    flex: 0 0 90%;
}

.nav__item {
    position: relative;
    &:hover{
        &::after{
            height: 8px;
        }
    }
    &:after{
        content: '';
        position: absolute;
        width: 100%;
        height: 0px;
        top: 0;
        left: 0;
        background: red;
        transition: all .3s linear;
    }
}

.nav__link {
    line-height: 55px;
    font-size: 18px;
}



.header-bottom {
    width: 370px;
    position: absolute;
    top: -410%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 99;

    transition: all .3s linear;
    &.active{
        top: 101%;
    }
}

.header-bottom__nav {
    background: #fff;
    padding: 10px 15px;
    position: relative;
}

.header-bottom__list {

}

.header-bottom__item {
    display: flex;
    justify-content: space-between;
    &:not(:last-child){
        margin-bottom: 10px;
    }
}

.header-bottom__label {
}
.header-bottom__progress {
}


.monitoring {
    background: #fff;
    padding: 15px 20px;
    border-radius: 10px;
    cursor: pointer;
    width: 100px;
    margin: 0 auto;
    border: 2px solid gray;
    display: flex;
    justify-content: center;
  
    transition: all .3s ease-out;
    &:hover{
      background: #000;
      color: #fff;
  }
}

.monitoring__icon {
    margin-right: 10px;
}

View Compiled

const header_bottom = document.querySelector('.header-bottom');
const monitoring_button = document.querySelector('.monitoring');

monitoring_button.onclick = () =>{
    header_bottom.classList.toggle('active');
}

This Pen is owned by Dima on CodePen.

See more by @gazes12 on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.