button aria-popup with Dashboard container/header

Question

Hi Team

 

I need some help around below logic, i have a header(Dashboard). I want this header be filled with my button aria-popup but this must show little at the end not be filled/expanded. here is my attempt

<center>
        <div class="ic-Dashboard-header_layout">
            <h1 class="ic-Dashboard-header_title">
                <span class="hidden-phone">Dashboard</span>
            </h1>
        <!---Some extra button here-->
        <div class="menu_button">
            <a id="menubutton" role="button" href="#" aria-haspopup="true" aria-expanded="false" aria-controls="menu2"></a>

            <!--lists of menu within a button-->
            <ul id="meu2" role="menu" arial-labelledby="menubutton">
                <li role="none">
                    <a role="menuitem" href="https://www.w3.org/">Dashboard View</a>
                </li>
                <li role="none">
                    <a role="menuitem" href="https://www.w3.org/TR/wai-aria-implementation/">Card View</a>
                </li>
                <li role="none">
                    <a role="menuitem" href="https://www.w3.org/TR/accname-aam-1.1">Recent Activity</a>
                </li>

            </ul>

            <!--Popu using jquery render dom-->
            <script type="text/javascript">
                window.onload = function () { var menubutton = new MenuButton(document.getElementById('menubutton')); menubutton.init(); }
            </script>
        </div>

        </div>

        <!--Content page header-->

        <section class="content-header-fluid">
        </section>
    </center>

<!--Core JS file-->
<script src="w3.org/TR/2016/WD-wai-aria-practises-1.1-20161224/examples/menu-button-2/js/PopupMenuLinks.js"></script>
<script type="text/javascript"></script>