JSFiddle - React, Tailwind, and code Playground

by Drath

HTML

<ul id="nav"><li><a href="#" rel="nofollow">Main 1</a>
     <ul class="submenu"><li><a href="#" rel="nofollow">Sub 1a</a></li>
          <li><a href="#" rel="nofollow">Sub 1b</a> </li>
          <li><a href="#" rel="nofollow">Sub 1c</a></li> 
         <li><a href="#" rel="nofollow">Sub 1d</a></li></ul>
</li>
   
  <li><a href="#" rel="nofollow">Main 2</a>
      
      <ul class="submenu"><li><a href="#" rel="nofollow">Sub 2a</a> </li>
      <li><a href="#" rel="nofollow">Sub 2b</a> </li>
      <li><a href="#" rel="nofollow">Sub 2c</a> </li>
      <li><a href="#" rel="nofollow">Sub 2d</a></li></ul>
</li>    
   
      <li><a href="#" rel="nofollow">Main 3</a></li></ul>

CSS

#nav ul, li {
    list-style: none;
    padding-left: 1px;
    padding-right: 1px;
    margin-left: 1px;
    /* position: relative; */
    float: left;
    border: 1px solid green;
    width: 60px;
}
      
ul.submenu {
    display: none;
}

ul#nav li:hover .submenu {
    position: absolute;
    display: inline; 
    top: 20px;
    border: 1px solid orange;
    left: -2px;
}

/* Added this */
#nav ul.submenu { width: 100%; }