JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="nav">
    <li>ITEM 1
        <ul>
            <li>ITEM 1.1</li>
            <li>ITEM 1.2</li>
            <li>ITEM 1.3</li>
        </ul>
    </li>
    <li>ITEM 2</li>
    <li>ITEM 3</li>
</ul>

CSS

html, body {
    margin: 0;
    padding: 0;
}

.nav {
    position:fixed;
    height:100%;
    left:0;
    top:0;
    width:175px;
    background:#111;
    padding:20px 0;
    margin: 0;
}
.nav ul {
    margin: 0;
    padding: 0;
}
.nav li {
    height:40px;
    line-height:40px;
    padding:0 250px;
    color:#FFF;
    font-size:13px;
    cursor:pointer;
    list-style: none;
    margin: 0;
}
.nav li:hover {
    background:#222;
}
.nav li ul {
    display: none;
}
.nav li:hover ul {
    display: block;
    position:fixed;
    left:175px;
    top:0;
    width:175px;
    height:100%;
    background:#999;
}