JSFiddle - React, Tailwind, and code Playground

by Riskbreaker

HTML

<nav>
			<section class="mnav">
			<ul>
				<li><a href="#">
				<span class="mlist">Test 1</span></a>
                 <div class="dd">
                        <div class="dd-column">
                            Test
                        </div>
                </div>
				</li>
                
				<li><a href="#">
				<span class="mlist">Test 2</span></a>
                <div class="dd">
                    <div class="dd-column">
                        Just another DD
                    </div>
                </div>
				</li>                
			</ul>					
		</section>
</nav>

CSS

body { margin: 0; overflow-x: hidden; position: relative;}
html, body {padding: 0; margin: 0;}

nav { z-index: 99999; padding: 6px}
.mnav {margin: 0 auto; max-width: 800px; position: relative; z-index: 999;}
.mnav ul {
display: block;
float: left;
font-size: 15px;
margin: 0;
padding: 0;
position: relative;
width: 650px;
margin-left: 95px;
}
.mnav li {
    display: block;
    float: left;
    line-height: 18px;
    text-align: center;
}

.mnav li:hover {background: #ccc;}
.mnav li:hover .dd { left:0; top: 16px; visibility: visible;}
.dd {
    background-color: #008AB0;
    color: #30404A;
    float: left;
    left: 0;
    margin: 0 -1000em;
    padding: 0 1000em;
    position: absolute;
    text-align: left;
    top: 100%;
    visibility: hidden;
}
.dd-column {
    display: inline;
    float: left;
    padding: 18px 0 18px 18px;
    position: relative;
    width: 230px;
}