JSFiddle - React, Tailwind, and code Playground

by icodeforlove

HTML

<!-- sample Drupal markup -->
<ul class="menu">
  <li class="first leaf">Item 1</li>
  <li class="leaf">Item 2</li>
  <li class="expanded">Item 3
    <ul class="menu">
      <li class="leaf">Sub-item 1</li>
      <li class="leaf">Sub-item 2</li>
      <li class="leaf">Sub-item 3</li>
    </ul>
  </li>
  <li class="leaf last">Last item</li>
</ul>

CSS

ul {
  float: left;
  margin: 0;
  padding: 0;
}
ul li {
  position: relative;
  float: left;
  list-style: none;
  list-style-image: none; /* DRUPAL!! */
  padding: .5em 1em;
  margin: 0;
    cursor: pointer;
    border: 1px solid red;
}
ul li ul {
  display: none;
  position: absolute;
  width: 120px;
  left: 0;
  top: 50px;
border: 1px solid red;
}

ul li:hover ul {
  display: block;
}