JSFiddle - React, Tailwind, and code Playground

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 {
	height:0;
    width:0;
    overflow:hidden;
	position:absolute;
    display:block;
	left:200px;
	top:0;
    transition: width 0.5s ease;
}
.vertical li:hover ul {
	width: 150px;
    height: auto;
	text-indent:5px;
}
.vertical li:hover a {
	color:pink;
}
@media screen and (max-width: 640px) {
    .vertical li ul {
        transition: height .5s ease;
    }
    
	.vertical li:hover ul {		
		position:inherit;
		left:0;
        width: auto;
        height: 120px;
	}
}