JSFiddle - React, Tailwind, and code Playground

by Douglas Duhaime

HTML

<ul class="menu">
      <li>
           <a href="#">Has arrow</a>
           <ul><li><a href="#">Sub Item 1</a></li>
               <li><a href="#">Sub Item 2</a>
                   <ul><li><a href="#">Sub-sub menu</a></li></ul>
               </li>              
          </ul>
      </li>
      <li>
           <a href="#">Has no arrow</a>
      </li>
      <li>
           <a href="#">Another arrow</a>
           <ul><li><a href="#">Sub Item 1</a></li>
               <li><a href="#">Sub Item 2</a>
                   <ul><li><a href="#">Sub-sub menu 1</a></li>
                       <li><a href="#">Sub-sub menu 2</a></li>
                       <li><a href="#">Sub-sub menu 3</a>
                           <ul>
                               <li><a href="#">Another for fun!</a></li>
                           </ul>
                       </li>
                   </ul>
               </li>              
          </ul>
      </li>
      <li>
           <a href="#">No arrow</a>
      </li>
  </ul>

CSS

.menu a {
      color: inherit;
      height: 10px;
      padding: 0 5px;
      text-decoration: none;
}

.menu li {
      display: inline-block; 
      position: relative;
      border-right: solid 1px black; 
      color: black;    
}

.menu li:last-of-type { border-right: none; }

.menu li > ul {
    position: absolute;
    left: 100%;
    top: 0;
    width: auto;
    display: none;
    white-space: nowrap;
}

.menu > li > ul {
    top: auto;
    left: 0;
    width: 100%;
}

.menu li > a:after { margin-left: 5px; content: '\25BA'; }
.menu > li > a:after { margin-left: 5px; content: '\25BC'; }
.menu li > a:only-child:after { margin-left: 0; content: ''; }

.menu li > ul > li { 
    border-right: none; 
    border-bottom: solid 1px black;
    display: block; 
}

.menu li:hover { background-color: yellow; }
.menu li:hover > ul {display: block; }