JSFiddle - React, Tailwind, and code Playground

HTML

<nav class="menu">
    <span>ICONE</span>
    <ul>
        <li>menu 01</li>
        <li>menu 02</li>
        <li>menu 03</li>
        <li>menu 04</li>
    </ul>
</nav>

CSS

.menu {
	width:100%;
	height:40px;
	background:#eee;
	color:000;
}
.menu ul {
	list-style: none;
	margin:0; padding: 0;
	display: none;
}
.menu ul li {
	display: table-cell;
}
.menu:hover .menu ul {
	display: table;
}
span {
    display:inline-block;
    float: left;
}
span:hover ~ ul {
    display:table;
}

@media (min-width:992px) {
	.menu {
		width: 50%;
		margin:0 auto;
	}
	.menu ul {
		display:table;
		width:100%;
	}
	.menu ul li {
		height:40px;
        line-height:40px;
        text-align:center;
	}
    span {
        display:none;
    }   
}