JSFiddle - React, Tailwind, and code Playground

by sanford

HTML

<ol>
    <li>A
        <ol>
            <li>B
                <ol>
                    <li>C
                        <ol>
                            <li>D</li>
                        </ol>
                    </li>
                </ol>
            </li>
        </ol>
    </li>
</ol>

CSS

body { font: 11px Verdana; }
ol { 
    height: 220px;
    width:200px;
    overflow: hidden;
    border: 1px solid gray;
}
li {
    height: 40px;
    width: 200px;
    padding: 20px;
    display:block;
    background-color: chocolate;
    border-bottom: 1px solid white;
    color: beige;
}
ol:hover li:first-child {
    ZZmargin-top: 10%;
}

li:first-child {
    position: relative;
    z-index: 2;
}
li:first-child + li {
    position: relative;
    top: -40px;
    z-index: 1;
}
li:hover {
    background: green;
}
li:first-child + li:hover {
    background: navy;
}
li:first-child:hover + li {
    background: silver;
}