JSFiddle - React, Tailwind, and code Playground

by Avi Algaly

HTML

<p>Hover this menu <i>(from bottom to top is most fun)</i>:</p>
<ul id="menu">
    <li><a href="#">Main menu</a>
        <ul>
            <li><a href="#">Sub menu 1</a></li>
            <li><a href="#">Sub menu 2</a></li>
            <li><a href="#">Sub menu 3</a>
                <ul>
                    <li><a href="#">Sub menu 3.1</a></li>
                    <li><a href="#">Sub menu 3.2</a></li>
                    <li><a href="#">Sub menu 3.3</a>
                        <ul>
                            <li><a href="#">Sub menu 3.3.1</a></li>
                            <li><a href="#">Sub menu 3.3.2</a>
                                <ul>
                                    <li><a href="#">Sub menu 3.3.2.1</a></li>
                                    <li><a href="#">Sub menu 3.3.2.2</a></li>
                                    <li><a href="#">Sub menu 3.3.2.3</a></li>
                                    <li><a href="#">Sub menu 3.3.2.4</a></li>
                                </ul>
                            </li>
                            <li><a href="#">Sub menu 3.3.3</a></li>
                            <li><a href="#">Sub menu 3.3.4</a></li>
                            <li><a href="#">Sub menu 3.3.5</a></li>
                        </ul>
                    </li>
                    <li><a href="#">Sub menu 3.4</a></li>
                    <li><a href="#">Sub menu 3.5</a></li>
                </ul>
            </li>
            <li><a href="#">Sub menu 4</a></li>
            <li><a href="#">Sub menu 5</a></li>
            <li><a href="#">Sub menu 6</a></li>
        </ul>
    </li>
</ul>
<p>The same menu, but now in hidden version:</p>
<div id="hidden">
    <ul id="menu">
        <li><a href="#">Main menu</a>
            <ul>
                <li><a href="#">Sub menu 1</a></li>
                <li><a href="#">Sub menu 2</a></li>
                <li><a href="#">Sub menu 3</a>
                    <ul>
                        <li><a href="#">Sub menu...

CSS

#menu li a       {background: #27794C}
ul#menu li a:hover {background: #36A668}
  #menu li:hover>a {background: #51C786}
  #menu li li a          {background: #36A668}
  #menu li ul li a:hover {background: #51C786}
  #menu li li:hover>a    {background: #7ED6A5}
  #menu li li li a          {background: #51C786}
  #menu li li ul li a:hover {background: #7ED6A5}
  #menu li li li:hover>a    {background: #ABE5C5}
  #menu li li li li a          {background: #7ED6A5}
  #menu li li li ul li a:hover {background: #ABE5C5}
  #menu li li li li:hover>a    {background: #D8F4E5}
  #menu li li li li li a          {background: #ABE5C5}
  #menu li li li li ul li a:hover {background: #D8F4E5}

#hidden li li,
#hidden li:hover li li,
#hidden li li:hover li li,
#hidden li li li:hover li li {display: none}
#hidden li:hover li,
#hidden li li:hover li,
#hidden li li li:hover li,
#hidden li li li li:hover li {display: block}
a {color: #000; text-decoration: none; font-size: 16px; width: 130px; display: block}
#hidden ul {list-style: none; margin: 0; padding: 0}
#hidden ul ul {position: absolute; top: 0; left: 130px}    
#hidden li {position: relative; margin: 0; padding: 0}
#hidden a+ul::before {content: ">"; position: absolute; left: -15px; display: block}