JSFiddle - React, Tailwind, and code Playground

by Amal Das

HTML

<html>
<head>
<style>
  ul { list-style-type:none; } 
  li { float:left }
  a { padding:5px; }              
  li > ul {  position:absolute; float: none} 
  .submenu { padding: 0px } 
  .submenu li { float:none;}
  .sub-submenu > *{ display:inline; }
</style>
</head>
<body>   
<ul>
    <li>
        <a href ="" >A</a>
        <ul class = "submenu">
            <li class = "sub-submenu">
                <a href = "">B</a>
                <ul>
                    <li  class = "sub-submenu">
                        <a href = "">C</a>   
                        <ul>
                            <li  class = "sub-submenu">
                                <a href = "">D</a>
                            </li>
                        </ul>
                    </li>
                </ul>
            </li>
        </ul>
    </li>
</ul>
</body>
</html>