JSFiddle - React, Tailwind, and code Playground

by Adil Heybətov

HTML

<nav>
    <ul>
        <li id='menu'><a><img src=''>hover me</a>
            <ul>
                <li>
                    <h1>Tell me why</h1>
                    <h2>the nested ul opacity doesn't transition</h2>
                </li>
            </ul>
        </li>
    </ul>
</nav>

CSS

nav ul {
    position:relative;
    width:64px;
    margin:350px 0 0 0;
    padding:0;
    background:#999;
    list-style:none;
}

nav img {float:left width:64px; height:64px;}
nav a {float:left;}

nav ul li {float:left; background-color:#999;}

nav ul li:hover > ul {visibility:visible; opacity:1;}

nav ul ul {
    visibility:hidden;
    display:block;
    position:absolute;
    opacity:0;
    width:300px;
    height:200px;
    bottom:100%;
    transition:opacity .3s linear, visibility .3s linear;
}