JSFiddle - React, Tailwind, and code Playground

by Torwan

HTML

<div id="nav">
    <li>
    <a href="">Mammals</a>
    <ul>
        <li>
            <a href="">Monotremes</a>
            <ul>
                <li><a href="">Echidnas</a></li>
                <li><a href="">Platypus</a></li>
            </ul>
        </li>
        <li>
            <a href="">Marsupials</a>
            <ul>
                <li><a href="">Opossums</a></li>
                <li><a href="">Numbats, etc.</a></li>
                <li><a href="">Bandicoots, etc.</a></li>
                <li><a href="">Kangaroos, koalas, wombats, etc.</a></li>
            </ul>
        </li>
        <li>
            <a href="">Placentals</a>
            <ul>
                <li><a href="">Primates, ungulates, etc.</a></li>
                <li><a href="">Anteaters, sloths, etc.</a></li>
                <li><a href="">Elephants, etc.</a></li>
            </ul>
        </li>
    </ul>
</li>
</div>
<p><a href="http://htmldog.com/techniques/dropdowns/">link to source</a></p>

CSS

/* Reset */

* {
	margin:0px;
	padding:0px;
}

.clearFix {
	clear: both;
}

/* Container */

#container {
	width: 960px;
	margin: 50px auto;
}

ul {
    padding: 0;
    margin: 0;
}

li {
    display: inline;
    position: relative;
}

ul ul {
    position: absolute;
    display: none;
}

li:hover ul {
    display: block;
}

ul ul ul {
    left: 100%;
    top: 0;
}

li:hover > ul {
    display: block;
}