JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
    <li>
        <a href="" title="">Parent category 1</a>
        <nav>
            11111111<br/>
            11111111<br/>
            11111111<br/>
            11111111<br/>
            11111111<br/>
            11111111<br/>
            11111111<br/>
        </nav>
    </li> 
    <li>
        <a href="" title="">Parent category 2</a>
        <nav>
            22222222<br/>
            22222222<br/>
            22222222<br/>
            22222222<br/>
            22222222<br/>
            22222222<br/>
            22222222<br/>
        </nav>
    </li> 
    <li>
        <a href="" title="">Parent category 3</a>
        <nav>
            33333333<br/>
            33333333<br/>
            33333333<br/>
            33333333<br/>
            33333333<br/>
            33333333<br/>
            33333333<br/>
        </nav>
    </li> 
    <li>
        <a href="" title="">Parent category 4</a>
        <nav>
            44444444<br/>
            44444444<br/>
            44444444<br/>
            44444444<br/>
            44444444<br/>
            44444444<br/>
            44444444<br/>
        </nav>
    </li> 
    <li>
        <a href="" title="">Parent category 5</a>
        <nav>
            55555555<br/>
            55555555<br/>
            55555555<br/>
            55555555<br/>
            55555555<br/>
            55555555<br/>
            55555555<br/>
        </nav>
    </li> 
    <li>
        <a href="" title="">Parent category 6</a>
        <nav>
            66666666<br/>
            66666666<br/>
            66666666<br/>
            66666666<br/>
            66666666<br/>
            66666666<br/>
            66666666<br/>
        </nav>
    </li> 
    <li>
        <a href="" title="">Parent category 7</a>
        <nav>
            77777777<br/>
            77777777<br/>
            77777777<br/>
            77777777<br/>
            77777777<br/>
            77777777<br/>
            77777777<br/>
        </nav>
    </li> 
    <li>
        <a...

CSS

ul{
    padding: 0;
    background-color: #eee;
    position: relative;
}
ul > li{
    list-style: none;
    width: 205px;
}
ul > li > a{
    display: block;
    padding: 9px 15px;
    box-sizing: border-box;
    border-right: 1px solid #E1E3DF;
    transition: all 280ms ease-in;
    position: relative;
    text-decoration: none;
    color: #000;
}
ul > li:hover > a{
    background-color: #E5F4F7;
    color: #34A8C4;
}
ul > li > nav{
    position: absolute;
    padding: 15px;
    right: 0;
    top: 0;
    bottom: 0;
    left: 205px;
    overflow: hidden;
    background-color: #E5F4F7;

    /* Transition magic here*/
    visibility: hidden;
    transition: visibility 280ms ease 0s;
}
ul > li:hover > nav{
    visibility: visible;
    transition-delay: 280ms;
}