JSFiddle - React, Tailwind, and code Playground

by nju33

HTML

<nav>
    <ul>
        <li>
            <ul>
                <li><a href="">list1</a></li>
                <li><a href="">list2</a></li>
                <li><a href="">list3</a></li>
                <li><a href="">list4</a></li>
            </ul>
            <a href="">nav1</a>
        </li>
        <li>
            <ul>
                <li><a href="">list1</a></li>
                <li><a href="">list2</a></li>
                <li><a href="">list3</a></li>
                <li><a href="">list4</a></li>
                <li><a href="">list5</a></li>
            </ul>
            <a href="">nav2</a>
        </li>
        <li>
            <ul>
                <li><a href="">list1</a></li>
                <li><a href="">list2</a></li>
                <li><a href="">list3</a></li>
            </ul>
            <a href="">nav3</a>
        </li>
    </ul>
</nav>

SCSS

a {
    color: inherit;
    text-decoration: none;
}

ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

li > ul {
    display: none; /* 初期 */
}

nav {
    width: 25em;
}

nav > ul {
    display: table;
    width: inherit;
}

nav > ul > li {
    display: table-cell;
    text-align: center;
}

nav > ul > li:not(:last-of-type) > a {
    border-right: 1px solid lighten(#3c3c3c, 10%);
}

nav > ul > li > a {
    color: #f8f8f8;
    background-color: #3c3c3c;
    padding: .5em;
    display: block;
}

nav li li > a {
    line-height: 1.7;
    display: block;
}

nav li li {
    &:hover {
        background-color: darken(#f8f8f8, 20%);
    }
}

nav li li:not(:last-of-type) {
    border-bottom: 1px dashed #3c3c3c;
}

JavaScript

$(function() {
    var $switch = $("nav > ul > li");
    var $list = null;
    $switch.on({
        "mouseover": function() {
            $list = $(this).find("ul");
            $list.slideDown(200);
        },
        "mouseleave": function() {
            $list.slideUp(200);
        }
    });
});