JSFiddle - React, Tailwind, and code Playground

by alexd0001

HTML

<ul class="tile_nav">
    <li><a href="#">Tile</a>
    </li>
    <li><a href="#">Tile</a>
    </li>
    <li><a href="#">Tile</a>
    </li>
    <li><a href="#">Tile</a>
    </li>
    <li><a href="#">Tile</a>
    </li>
    <li><a href="#">Tile 4</a>

        <ul class="tile_subnav">
            <li><a href="#">Sub 1 of Tile 4</a>
            </li>
            <li><a href="#">Sub 2 of Tile 4</a>
            </li>
        </ul>
    </li>
</ul>

CSS

.tile_nav {
    width:482px;
    list-style:none;
    padding: 0;
    margin: 0;
}
.tile_nav li {
    width:60px;
    height:60px;
    float:left;
    list-style:none;
    background:#ccc;
    padding: 0;
    margin:0 1px 1px 0;
}
.tile_nav > li {
    position: relative;
}
.tile_nav li a {
    width:60px;
    height:60px;
    display:block;
}
.tile_subnav {
    padding: 0;
}
.tile_subnav li {
    background:red;
}
.tile_nav li ul {
    top: 61px;
    left: 0;
    opacity: 0;
    margin: 0;
    position: absolute;
    transition: opacity 0.3s linear, transform 0.4s ease;
    transform: scale(0);
}
.tile_nav li:hover ul {
    transform: scale(1);
    opacity: 1;
}

JavaScript

$(document).ready(function () {
    //Fade effect
    $(".tile_nav  li").(function () {
        $(this).siblings().css("opacity", .5);


    }, function () {
        $(this).siblings().css("opacity", 1);

    });
});