JSFiddle - React, Tailwind, and code Playground

by Ian Roberts

HTML

<div class="topNav">
    <table>
        <tbody>
            <tr>
                <td>
                    <a href="#">link layer 1</a>
                    <ul>
                        <li>
                            <a href="#">link layer 2</a>
                            <ul>
                                <li>
                                    <a href="#">link layer 3</a>
                                </li>
                                <li>
                                    <a href="#">link layer 3</a>
                                </li>
                                <li>
                                    <a href="#">link layer 3</a>
                                </li>
                                <li>
                                    <a href="#">link layer 3</a>
                                </li>
                            </ul>
                        </li>
                        <li>
                            <a href="#">link layer 2</a>
                            <ul>
                                <li>
                                    <a href="#">link layer 3</a>
                                </li>
                                <li>
                                    <a href="#">link layer 3</a>
                                </li>
                                <li>
                                    <a href="#">link layer 3</a>
                                </li>
                                <li>
                                    <a href="#">link layer 3</a>
                                </li>
                            </ul>
                        </li>
                    </ul>
                </td>
            </tr>
        </tbody>
    </table>
</div>

CSS

/*general*/
ul, li{margin:0px; list-style:none;padding: 10px;}
.topNav td ul {background:#333; float:left;}
.topNav td ul li {background:#bbb;float:left; margin:0px 5px;}
.topNav td ul ul { padding: 0px; }
.topNav td ul ul li {background:#eaeaea; float:none; padding:10px 2px; margin:0px;}