JSFiddle - React, Tailwind, and code Playground

by ninty9notout

HTML

<!-- Entire Navbar Code -->
    <div class="row">
        <div class="twelve columns">
            <ul class="nav-bar cf">
                <li class="has-flyout">
                    <a href="#">Nav Item 1</a>
                    <div class="flyout">
                        <div class="row">
                            <div class="six columns">
                            <p>Dit is neptekst. Dit is neptekst. Dit is neptekst. Dit is neptekst. Dit is neptekst. Dit is neptekst. Dit is neptekst. </p>
                            </div>
                            <div class="six columns">
                            <p>Dit is neptekst. Dit is neptekst. Dit is neptekst. Dit is neptekst. Dit is neptekst. Dit is neptekst. Dit is neptekst. </p>
                            </div>   
                        </div>
                    </div>
                </li>
                <li class="has-flyout"><a href="#">Nav Item 2</a></li>
                <li class="has-flyout">
                        <a href="#">Nav Item 3</a>
                    <div class="flyout">
                    <div class="row">
                        <div class="six columns">
                        <p>Dit is echte tekst. Dit is echte tekst. Dit is echte tekst. Dit is echte tekst. Dit is echte tekst. Dit is echte tekst. </p>
                        </div>
                        <div class="six columns">
                        <p>Dit is echte tekst. Dit is echte tekst. Dit is echte tekst. Dit is echte tekst. Dit is echte tekst. Dit is echte tekst.  </p>
                        </div>   
                    </div>
                </div>
                   </li>
            </ul>
      </div>
    </div>

CSS

.row { position: relative; }

.nav-bar, .nav-bar li, .nav-bar li > a { float: left; }

.nav-bar { list-style: none; margin: 0; padding: 0; }

.nav-bar li { margin-left: 20px; }
.nav-bar li:first-child { margin-left: 0; }
.nav-bar li > a:hover + .flyout { display: block; }

.flyout { width: 800px; position: absolute; left: 0; display: none; }
.flyout:hover { display: block; }

.cf:before, .cf:after { content: " "; display: table; }
.cf:after { clear: both; }
.cf { *zoom: 1; }