JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
      <div class="menu_wrap">
            <div class="menu_bg"></div>
            <div class="menu">
                <ul>
                    <li><a href="#">item 1</a></li>
                    <li><a href="#">item2</a></li>
                    <li><a href="#">item3</a></li>
                    <li><a href="#">item4</a></li>
                    <li><a href="#">item5</a></li>
                    <li><a href="#">item6</a></li>
                </ul>
            </div>
    </div>
    <div class="content">It's me, Mario!</div>
</div>

CSS

.container {
    width:50%;
    margin: 0 auto;
    background:lightgreen;
    height:300px;
}
.menu_bg{
    position: absolute;
    background: #afafaf;
    width: 100%;
    left:0;
    height:30px;
    z-index: -1;
}
ul {
    height:30px;
    background: #afafaf;
}
li {
    display:inline-block;
}