JSFiddle - React, Tailwind, and code Playground

by Rajshekar Reddy

HTML

<ul class="container">
  Drop down menu
  <li class="test1">
    <a class="dropdown" href="#">X Close</a>
  </li>
  <li class="MenuLinks">
    <ul class="content">
      CLOSE THIS CONTENT
      <li class="link"><a href="http://www.google.com">Go to link 1</a>
      </li>
      <li class="link"><a href="https://www.google.co.uk">Go to link 2</a>
      </li>
      <li class="link"><a href="https://www.google.co.uk">Go to link 3</a>
      </li>
    </ul>
  </li>
</ul>

CSS

body {
  padding: 20px;
}

.container {
  border: 1px solid lime;
  padding: 10px;
  width: 200px;
  list-style-type: none;
}

.test1,
.MenuLinks {
  display: none;
  border-color: orange;
  border-style: dashed;
  background: green;
  pointer-events: none;
}

.test1 {
  padding: 10px;
  border-width: 1px 1px 0px 1px;
}

.MenuLinks {
  border-width: 0px 1px 1px 1px;
}

.container:hover li {
  display: block;
}

.container:hover .test1:active,
.container:hover .test1:active + .MenuLinks {
  display: none;
}

a {
  pointer-events: auto;
  color: lime;
  font-weight: bold;
}