JSFiddle - React, Tailwind, and code Playground

by khamer

HTML

<link rel="stylesheet" href="http://imarc.github.io/boilerplate/css/styles.css">
<script src="http://cherne.net/brian/resources/jquery.hoverIntent.js"></script>
<div class="torso">
    <div class="main">
        <div class="hero">This is a hero.</div>
        
        <nav class="menu">
            <ul class="container">
                <li>
                    <a href="#">financial advisors</a>
                    <div class="details">
                        <a href="#">financial advisors</a>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius maiores nulla harum aut nesciunt assumenda corrupti ipsa saepe cum maxime.</p>
                    </div>
                </li>
                <li>
                    <a href="#">broker-dealers</a>
                    <div class="details">
                        <a href="#">broker-dealers</a>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius maiores nulla harum aut nesciunt assumenda corrupti ipsa saepe cum maxime.</p>
                    </div>
                </li>
                <li>
                    <a href="#">registered investment advisors</a>
                    <div class="details">
                        <a href="#">registered investment advisors</a>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius maiores nulla harum aut nesciunt assumenda corrupti ipsa saepe cum maxime.</p>
                    </div>
                </li>
                <li>
                    <a href="#">investment managers</a>
                    <div class="details">
                        <a href="#">investment managers</a>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius maiores nulla harum aut nesciunt assumenda corrupti ipsa saepe cum maxime.</p>
                    </div>
                </li>
                <li>
                    <a href="#">bank trust</a>
        ...

CSS

.hero {
    height: 320px;
    background: blue;
}

.menu {
    background: gold;
}

.menu .container:before,
.menu .container:after {
    display: none;
}
.menu .container {
    display: table;
    width: 100%;
}
.menu .container > li {
    float: none;
    display: table-cell;
}
.menu .container > li a {
    text-align: center;
    display: block;
    background: pink;
}
.menu .container .details {
    position: absolute;
    bottom: 0;
    display: block;
    white-space: normal;
    overflow: hidden;
    background: peru;
}
.menu .container .details p {
    padding: 0 1em;
}

JavaScript

$('.menu li .details').each(function() {
    $(this).data('height', $(this).height());
    $(this).height(0);
});

$('.menu li').hoverIntent(function() {
    var $li = $(this);
    var $details = $li.find('.details');
    $details.css('width', $li.width());
    
    $details.animate({
        height: $details.data('height')
    });
}, function() {
    var $li = $(this);
    var $details = $li.find('.details');
    
    $details.animate({
        height: 0
    });
});