JSFiddle - React, Tailwind, and code Playground

by keisersuze

HTML

<nav>
<ul class="menu vertical">
    <li></li>
    <li><a href="#">Menu 1</a></li>
    <li><a href="#">Menu 2</a></li>
    <li><a href="#">Menu 3</a></li>
    <li><a href="#">Menu 4</a></li>
    <li><a href="#">Menu 5 +</a>
        <ul>
            <li><a href="#">Sub menu 1</a></li>
            <li><a href="#">Sub menu 2</a></li>
            <li><a href="#">Sub menu 3</a></li>
            <li><a href="#">Sub menu 4</a></li>
        </ul>
    </li>
    <li><a href="#">Menu 6</a></li>
    <li><a href="#">Menu 7</a></li>
</ul>
</nav>

CSS

body{
	font:12px Verdana, Geneva, sans-serif;
	margin:0;
	padding:0;
}
nav{
	position:fixed;
	width:200px;
	height:100%;
	background:grey;
}
.menu a{
	display:inline-block;
	text-decoration:none;
	padding:5px;
	color:white;
}
.menu, .menu * {
	width:200px;
	list-style:none;
	margin:0;
	padding:0;
}
.menu li {
	float:left;
	position:relative;
	width:200px;
	background:grey;
}
.vertical li ul {
	display:none;
	position:absolute;
	left:200px;
	top:0;
}
.vertical li:hover ul {
	display:block;
	text-indent:5px;
}
.vertical li:hover a {
	color:pink;
}
@media screen and (max-width: 640px) {
	.vertical li:hover ul {
		display:block;
		position:inherit;
		left:0;
	}
}