JSFiddle - React, Tailwind, and code Playground

by amindunited

HTML

<div class="navBarWrap">
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li class="pathWrap">
            <ul>
                <li>Sub 01</li>
                <li>Sub 02</li>
                <li>Sub 03</li>
            </ul>
        </li>
        <li class="right">7</li>
        <li class="right">8</li>
        <li class="right">9</li>
    </ul>
</div>

CSS

.navBarWrap { border: solid 1px gray;}
.navBarWrap > ul {list-style-type: none;}
.navBarWrap > ul > li { 
    list-style-type: none;
    display: inline-block;
}
.navBarWrap > ul > li {
    float: left;
    border: solid 1px gray;
}
.navBarWrap > ul > li.right {
    float: right;
}
.navBarWrap > ul > li > ul {
    list-style-type: none;
}
.navBarWrap > ul > li > ul > li {
    display: inline-block;
}