JSFiddle - React, Tailwind, and code Playground

honest navigation

by CBroe

HTML

<ul>
    <li>
        <a href="#/foo">/foo</a>
        <ul>
            <li><a href="#/foo/bar">/foo/bar</a></li>
            <li><a href="#/foo/baz">/foo/baz</a></li>
        </ul>
    </li>
    <li>
        <a href="#/About_Us">/About<span>_</span>Us</a>
        <ul>
            <li><a href="#/About_Us/Team">/About<span>_</span>Ts/Team</a></li>
            <li><a href="#/About_Us/Jobs">/About-Ls/Jobs</a></li>
        </ul>
    </li>
</ul>

CSS

a { display:inline-block; text-decoration:none; }
a span { display:inline-block; position:relative; top:-.75em; font-size:.5em; margin:0 .25em }