JSFiddle - React, Tailwind, and code Playground

by Derek Wood

HTML

<nav class='container navigation'>
<div class='inner-w'>
    
	<ul class='menu'>
        <li>
            <a href='#'>Top-level menu item 1</a>
            <ul class='sub-menu'>
                <li><a href='#'>Sub-menu item 1</a></li>
                <li><a href='#'>Sub-menu item 2</a></li>
                <li><a href='#'>Sub-menu item 3</a></li>
                <li><a href='#'>Sub-menu item 4</a></li>
            </ul>
        </li>
        <li><a href='#'>Top-level menu item 2</a></li>
        <li>
            <a href='#'>Top-level menu item 3</a>
            <ul class='sub-menu'>
                <li><a href='#'>Sub-menu item 1</a></li>
                <li><a href='#'>Sub-menu item 2</a></li>
            </ul>
        </li>
        <li><a href='#'>Top-level menu item 4</a></li>
	</ul>
    
</div>
</nav>

CSS

/* global-structure */
.container {
    width: 100%;
    float: left;
}

.container .inner-w {
    margin-right: auto; margin-left: auto;
    max-width: 900px; /* arbitrary */
    /* this should have a clear-fix */
}

/* menu styles */
.menu, .menu ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.menu li {
    float: left;
}

.menu > li { /* just the top-level li */
    position: relative;
    /* so the sub-menu can be positioned to this */
    border-right: 1px solid rgba(0,0,0,.3)
}

.menu > li:last-child {
    border-right: 0;
}

.menu a {
    display: block;
    padding: .8rem .5rem;
    background: #eee;
    min-width: 160px;
    color: inherit;
    text-decoration: none;
}

.sub-menu {
    position: absolute;
    top: 100%;
    left: 0;
    height: 0;
    width: 0; /* just hide it visually */
    overflow: hidden;
    z-index: 5; /* arbitrary, keep them small though... */
}

.sub-menu li {
    clear: left;
    border-bottom: 1px solid rgba(0,0,0,.3)
}

.sub-menu li:last-child {
    border-bottom: 0;
}

.sub-menu a {
    background: #ccc;
}

.sub-menu a:hover {
    background: #aaa;
}

.menu > li:hover .sub-menu {
    height: auto;
    width: auto;
}










body {
    min-height: 300px;
}
}

JavaScript

// ensure that your # links aren't a part of the issue
$('a').on('click', function(event) {
   event.preventDefault(); 
});