JSFiddle - React, Tailwind, and code Playground

by moob

HTML

<nav>
                        <span class="mob-nav" data-hide="tab desk"><a href="#" id="home-button" class="icon-home">Home</a></span>
                        <a href="#" id="menu-button" data-hide="tab desk" class="icon-menu">Menu</a>
                        <ul id="root" class="tablesque open">
                            <li class="on" data-hide="mob"><a href="#" class="icon-home">Home</a></li>
                            <li><a href="#">Marketplace</a></li>
                            <li><a href="#">Sale Items</a></li>
                            <li><a href="#">Contact Us</a></li>
                            <li><a href="#">Blog</a></li>
                            <li><a href="#">Latest Stock</a></li>
                            <li><a href="#mob-browse">Browse Stock</a>
                                <div class="mm">
                                    <div class="mm_col">
                                        <ul id="mob-browse" >
                                            <li class="back"><a href="#root">back</a></li>
                                            <li><a href="#mob-clothing">Clothing</a>
                                                <ul id="mob-clothing" class="show-first" data-show-first-count="3">
                                                    <li class="back"><a href="#mob-browse">back</a></li>
                                                    <li><a href="#">Sub section</a></li>
                                                    <li><a href="#">Sub section</a></li>
                                                    <li><a href="#">Sub section</a></li><li class="view-parent"><a class="view-all" href="#">View All</a></li>
                                                    <li class="li-hide"><a href="#">Sub section</a></li>
                                                    <li class="li-hide"><a href="#">Sub section</a></li>
                                                    <li class="li-hide"><a href="#">Sub...

CSS

html, body {margin:0; height:100%; min-height:100%;}
nav {margin:0px; border:1px solid red; position:relative; overflow:hidden; overflow-y:visible; height:400px;}
ul {display:block; margin:0; padding:0; width:100%;}
li {display:block; background:#eee;}
li ul {
    display:block;
    position:absolute; top:0; left:100%;
    z-index:0;
    width:100%;
}
li ul ul {
    display:none;
}
li ul:target {
    display:block!important;
    z-index:1000;
}

li.back {
    background:orange
}