JSFiddle - React, Tailwind, and code Playground

by envira

HTML

<ul class="menu">
    <li><a href="">child 1</a>
    <ul class="sub-menu">
        <li><a href="">child 1.1</a></li>
         <li><a href="">child 11</a></li>
          <li><a href="">child 111</a></li>
        </ul>
      </li>
  <li><li><a href="">child 2</a>
    <ul class="sub-menu">
      <li><a href="">child 22</a></li>
      <li><a href="">child 222</a></li>
    </ul>
  </li>
</ul>

CSS

.sub-menu {
    display:none;
}

.menu {
    height: 40px;
    line-height:40px;
    width:auto;
    display:block;
    background:#222;
}

.menu li {
    list-style:none;
    float:right;
    position: relative;
    display: inline;
}

.menu li a {
display:block;
padding:0px 10px;
text-align:right;
}

.menu li ul {
top: 40px;
position: absolute;
padding: 0;
margin: 0;
width: 200px;
background:#222;
left: auto;
right: 0;
}

.menu li ul li {
    display: block;
    float:left;
    width:100%;
}

JavaScript

$("ul.menu").find('> li').hover(
    function() {
        $(this).find('> ul').slideDown();
    },
    function() {
        $(this).find('> ul').hide();
    }
);

$("ul.sub-menu").find('> li').hover(
    function() {
        $(this).find('> ul').slideDown();
    },
    function() {
        $(this).find('> ul').hide();
    }
);