JSFiddle - React, Tailwind, and code Playground

by Sachin Patel

HTML

<div id="menu-panel">
    <ul class="navbar-nav">
        <li>
            first
            <ul>
                <li>
                    second
                    <ul>
                        <li>
                            third
                            <ul>
                                <li>
                                    fourth
                                </li>
                            </ul>
                        </li>
                    </ul>
                </li>
            </ul>
        </li>            
    </ul>
</div>

<div id="menu-panel2">
    <ul class="navbar-nav">
        <li>
            my first
            <ul>
                <li>
                    my second
                    <ul>
                        <li>
                            my third
                            <ul>
                                <li>
                                    my fourth
                                    <ul>
                                        <li>
                                            my fifth
                                        </li>
                                    </ul>
                                </li>
                            </ul>
                        </li>
                    </ul>
                </li>
            </ul>
        </li>            
    </ul>
</div>

CSS

ul,li {   
    list-style-type: none;
    padding:0;
    margin:0;
}
#menu-panel .navbar-nav > li{padding:0px;}
#menu-panel .navbar-nav > li > ul > li{padding:5px 0 5px 4px;}
#menu-panel .navbar-nav > li > ul > li > ul > li{padding:5px 0 5px 8px;}
#menu-panel .navbar-nav > li > ul > li > ul > li > ul > li{padding:5px 0 5px 12px;}

#menu-panel2 .navbar-nav li > ul > li:before {
    content: '';
    background: red;
    width:  100px;
    height: 1.2em;
    float: left;
}