JSFiddle - React, Tailwind, and code Playground

by Bipin Kumar Pal

HTML

<ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a>
                <ul>
                <li><a href="#">About-1</a></li>
                <li><a href="#">About-1</a></li>
                <li><a href="#">About-1</a>
                    <ul>
                        <li><a href="#">About-2</a></li>
                        <li><a href="#">About-2</a></li>
                        <li><a href="#">About-2</a>
                            <ul>
                                <li><a href="#">About-3</a></li>
                                <li><a href="#">About-3</a></li>
                                <li><a href="#">About-3</a>
                                	<ul>
                                        <li><a href="#">About-4</a></li>
                                        <li><a href="#">About-4</a></li>
                                        <li><a href="#">About-4</a></li>
                                        <li><a href="#">About-4</a></li>
                                    </ul>
                                </li>
                                <li><a href="#">About-3</a></li>
                            </ul>
                        </li>
                        <li><a href="#">About-2</a></li>
                    </ul>
                </li>
                <li><a href="#">About-1</a></li>
            </ul>
         </li>
        <li><a href="#">profile</a></li>
        <li><a href="#">Contact</a>
        	<ul>
                <li><a href="#">contact-1</a></li>
                <li><a href="#">contact-1</a></li>
                <li><a href="#">contact-1</a></li>
                <li><a href="#">contact-1</a></li>
            </ul>
         </li>
    </ul>

CSS

*{ padding:0px; margin:0px;}
ul{padding:0px; margin:0px; list-style:none; width:100%}
ul li{ float:left; padding-right:1px; position:relative;}
ul a{ text-decoration:none; display:table-cell; vertical-align:middle; text-align:center; color:#000; height:30px;
 width:100px; background-color:#0CF; color:#fff;}
ul a:hover{ background-color:#36C;}
li > ul{ display:none; position:absolute; left:0px; top:100%;}
li:hover > ul{ display:block;}
li > ul li { padding:0px; padding-right:1px; padding-top:1px;}
li > ul li > ul{ top:0px; left:100%; padding-left:1px;}
li > ul li > ul li{width:100px;}