JSFiddle - React, Tailwind, and code Playground

HTML

<div class="main-navigation-wrapper">
    <div class="nav pull-left">
        <div class="menu-main-menu-container">
            <ul id="menu" class="menu no-dropdown">
                <li class="menu-item">
                    <a href="#">List</a>
                    <div class="children-wrapper">
                        <div class="children">
                        	<ul>
                            	<li><a href="#">Item 1</a></li>
                                <li><a href="#">Item 2</a></li>
                                <li><a href="#">Item 3</a></li>
                            </ul>
                        </div>
                    </div>
                 </li>
                 <li class="menu-item">
                    <a href="#">Mega</a>
                    <div class="children-wrapper">
                        <div class="children">
                        	<div class="chunk">
                            	<h3>Category 1</h3>
                                <ul>
                                    <li><a href="#">Item 1</a></li>
                                    <li><a href="#">Item 2</a></li>
                                    <li><a href="#">Item 3</a></li>
                                </ul>
                            </div>
                            <div class="chunk">
                            	<h3>Category 1</h3>
                                <ul>
                                    <li><a href="#">Item 1</a></li>
                                    <li><a href="#">Item 2</a></li>
                                    <li><a href="#">Item 3</a></li>
                                </ul>
                            </div>
                            <div class="chunk">
                            	<h3>Category 1</h3>
                                <ul>
                                    <li><a href="#">Item 1</a></li>
                                    <li><a href="#">Item 2</a></li>
                                    <li><a...

CSS

.main-navigation-wrapper { position:relative; max-width:1100px; margin:0 auto; }
#menu { margin:0; padding:0; }
#menu > li { display:inline-block; }
#menu > li > a { display:block; padding:50px 30px; }
.children-wrapper { position:absolute; width:100%; top:80px; left:0; text-align:center; opacity:0; visibility:hidden; }
.children { display:inline-block; min-width:200px; border:1px solid #ccc; padding:20px; text-align:left; }
#menu > li:hover .children-wrapper { opacity:1; visibility:visible; }

.chunk { width:150px; float:left; margin-right:10px; }
.chunk h3 { color:#fff; background:#0CF; }