JSFiddle - React, Tailwind, and code Playground

by s4ty

HTML

<ol id="navigation">
            <li ><a >A</a></li>
            <li ><a >B</a></li>
            <li ><a >C</a>
        <ul ><a >C1</a></ul>
        <ul ><a >C2</a></ul>
            </li>
            <li>D
        <ul ><a >D1</a></ul>
        <ul ><a >D2</a></ul>
            </li>
            <li ><a>E</a></li>
        </ol>

JavaScript

$('#navigation li').hover(
    function () {
        $(this)
            .addClass('hover')
            .stop()
            .animate({'marginTop':'40px'},200);
    },
    function () {
        $(this)
            .parent()
            .find('li:not(:has(.hover))')
            .stop()
            .animate({'marginTop':'0px'},200)
            .end()
            .find('li')
            .removeClass('hover');
    }
);