JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
    <li class="blk">
        <a href="#">
            <ul>
                <li>A</li>
                <li>B</li>
            </ul>
        </a>
    </li>
    <li>
        <ul>
            <li>C</li>
            <li>D</li>
        </ul>
    </li>
    <li class="blk">
        <ul>
            <li>G</li>
            <li>H</li>
        </ul>
    </li>
    <li>
        <a href="#">
            <ul>
                <li>E</li>
                <li>F</li>
            </ul>
        </a>
    </li>
</ul>

CSS

ul {
    list-style:none;
    padding:0;
}
ul li ul li {
    display:block;
    float:left;
    width: 5rem;
    padding: .4rem;
    border: 1px solid #e0e0e0;
}
ul li ul { 
    clear:both;
}
.blk ul li { background: #eee }