JSFiddle - React, Tailwind, and code Playground

by khamer

HTML

<ul>
    <li>
        <a href="">A</a>
        <ul>
            <li><a href="">B</a></li>
            <li><a href="">C</a></li>
            <li><a href="">D</a></li>
            <li><a href="">E</a></li>
        </ul>
    </li>
</ul>

CSS

* { margin: 0; padding: 0; }
li { list-style: none; }
a {
    border: 1px solid #000;
    width: 32px;
    height: 32px;
    display: block;
    text-align: center;
    line-height: 32px;
    border-radius: 16px;
}

ul, li {
    position: relative;
}

ul ul {
    position: absolute;
    left: 96px;
    top: 0;
}
ul ul a {
    float: none;
}

body > ul > li:first-child > a:after {
    content: '';
    position: absolute;
    left: 32px;
    top: 12px;
    width: 64px;
    height: 8px;
    background: #fff;
    border: 1px solid #000;
    border-width: 1px 0;
}

ul ul li:not(:first-child) a {
    margin-top: 8px;
}

ul ul li:not(:first-child) a:before {
    content: '';
    position: absolute;
    right: 32px;
    bottom: 12px;
    width: 24px;
    height: 64px;
    border: 8px solid #fff;
    box-shadow: -1px 1px 1px #000, 1px -1px 1px #000 inset;
    border-width: 0 0 8px 8px;
    border-radius: 0 0 0 32px;
}

ul ul li:nth-child(2) a:before {
    height: 35px;
}