HTML

<nav class="bs-navigation">
    <ul class="bs-nav" data-behavior-is="megamenu-nav">
        <li data-megamenu-id="navAbout"><a href="../components/accordion.html">About</a></li>
        <li data-megamenu-id="navInvestor"><a href="../components/tab.html">Investor</a></li>
        <li><a href="../components/modal.html">Contact us</a></li>
    </ul>
    <div class="bs-megamenu">
        <div class="bs-megamenu__wrapper" id="navAbout">
            <div class="bs-megamenu__info">
                <h4>About</h4>
                <p>quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
            </div>
            <ul>
                <li class="has-subnav">
                    <a href="#">Who we are</a>
                    <button></button>
                    <ul>
                        <li><a href="#">Our purpose</a></li>
                        <li><a href="#">Our business model</a></li>
                    </ul>
                </li>

                <li><a href="#">What we do</a></li>

                <li class="has-subnav">
                    <a href="#">Corporate governance</a>
                    <button></button>
                    <ul>
                        <li class="has-subnav">
                            <a href="#">Board of director</a>
                            <button></button>
                            <ul>
                                <li><a href="#">Head of department</a></li>
                                <li><a href="#">Seinor management</a></li>
                            </ul>
                        </li>

                        <li class="has-subnav">
                            <a href="#">Our approach</a>
                            <button></button>
                            <ul>
                                <li><a href="#">Materiality</a></li>
                                <li><a href="#">Stakeholder engagement</a></li>
                            </ul>
                        </li>
                    </ul>
                </li>
            </ul>
        </div>
        <div class="bs-megamenu__wrapper" id="navInvestor">
            <div class="bs-megamenu__info">
                <h4>Investor</h4>
                <p>quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
            </div>
            <ul>
                <li><a href="#">Order a report</a></li>
                <li class="has-subnav">
                    <a href="#">Our proposition</a>
                    <button></button>
                    <ul>
                        <li><a href="#">Why invest</a></li>
                        <li><a href="#">ESG</a></li>
                        <li><a href="#">Fact sheet</a></li>
                    </ul>
                </li>
                <li><a href="#">Financial performance</a></li>
            </ul>
        </div>
    </div>
</nav>