JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="horMenu grid_3">
  <li>
    <p><strong><a href="#">Test Link 1</a></strong></p>
    <p class="description">A short description</p>
  </li>
  <li>
    <p><strong><a href="#">Test Link 2</a></strong></p>
    <p class="description">A short description</p>
  </li>
  <li>
    <p><strong><a href="#">Simple Menu</a></strong></p>
    <p class="description">A short description</p>

    <ul class="simpleMenu">
      <li><a href="#">Test Link 1</a></li>
      <li>
        <a href="#">Test Link 1</a>
          <ul>
            <li><a href="#">Sub Menu Item 1</a></li>
            <li><a href="#">Sub Menu Item 2</a></li>
            <li><a href="#">Sub Menu Item 3</a></li>
          </ul>
      </li>
      <li><a href="#">Test Link 1</a></li>
    </ul>
  </li>
</ul>

CSS

body { font: 12px/16px arial, helvatica, sans-serif; }
strong { font-weight: bold; }
.description { font-size: 10px; }
.horMenu li {
    float: left;   
    position: relative;
    padding: 10px;
    margin-right: 3px;
    border: 1px solid blue;
}
.horMenu ul {
    display: none;
    position: absolute;
    top: auto;
    left: 0;
}
.horMenu li:hover > ul {
    display: block;
}
.horMenu ul ul {
    top: 0;
    left: auto;   
}
.horMenu > li > ul {
    margin-top: 10px;   
}