megamenu

HTML

<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="https://use.fontawesome.com/releases/v5.7.2/js/all.js"></script>
<hgroup class="panel-nav container-fluid position-fixed" style="background: rgba(255,35,51,1);">
    <div class="row">
        <div class="menu col-3 p-0">
            <span class="btn btn-secondary rounded-0 w-100 h-100" role="button">
                <i class="fas fa-bars"></i> Категория
            </span>
            <menu class="position-absolute bg-light w-100 border border-top-0" style="max-height: 225px;">
                <a href="" class="p-1 d-block">category 1</a>
                <nav class="position-absolute bg-white h-100 border-bottom border-right p-1">
                    <a href="">sub-category 1</a>
                </nav>
                <a href="" class="p-1 d-block">category 2</a>
                <nav class="position-absolute bg-white h-100 border-bottom border-right p-1">
                    <a href="">sub-category 2</a>
                </nav>
                <a href="" class="p-1 d-block">category 3</a>
                <nav class="position-absolute bg-white h-100 border-bottom border-right p-1">
                    <a href="">sub-category 3</a>
                </nav>
                <a href="" class="p-1 d-block">category 4</a>
                <nav class="position-absolute bg-white h-100 border-bottom border-right p-1">
                    <a href="">sub-category 4</a>
                </nav>
                <a href="" class="p-1 d-block">category 5</a>
                <nav class="position-absolute bg-white h-100 border-bottom border-right p-1">
                    <a href="">sub-category 5</a>
               ...

CSS

.panel-nav { background: rgb(255,35,51); }
.panel-nav .btn { background: rgb(234, 33, 48) !important; border: 0; }
.panel-nav hgroup.btn { background: rgb(234, 33, 48) !important; border: 0; cursor: pointer; }
.panel-nav .btn:hover { background: rgb(222, 34, 47) !important; }
.panel-nav div div form .btn { background: rgb(255, 255, 255) !important; }
.panel-nav div div form .btn:hover { background: rgb(224, 224, 224) !important; }

.menu menu {display:none; max-height: 225px; margin:0; }
.menu:hover menu { display:block; }
.menu menu nav { display:none;left: calc(100% - (-1px));top:0;min-width: calc(768px - (-57.3%));}
.menu menu a:hover+nav { display:block; }