JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://github.com/arieh/YADDM/raw/master/Source/YADDM.js"></script>
<ul id='menu'>
   <li class='menu-button-first'>
      <a href='#'>
         Articles</a>
      <ul class='submenu' >
         <li><a href='#' >Sitebuilding</a></li>
         <li><a href='#' >Javascript</a></li>
      </ul>
    </li>
    <li class='menu-button' >
      <a href='#'>
        Add</a>
      <ul class='submenu' id='Add'>
        <li class='menu-button'>
          <a  href='#'>Add Article</a>
        </li>  
        <li class='menu-button'>
          <a  href='#'>Add Section</a>
        </li>  
        <li class='menu-button'>
          <a   href='#'>Add User</a>
        </li>  
        <li class='menu-button'>
          <a   href='#'>Add Page</a>
        </li>  
        <li class='menu-button'>
          <a href='#'>Add Seminar</a>
        </li>  
     </ul>
   </li>
   <li class='menu-button'>
     <a  href='#'>Settings</a>
     <ul class='submenu'>
        <li>
            <a href='#'>Personals</a>
            <ul class='submenu'>
               <li><a href='#'>Change Name</a></li>
               <li><a href='#'>Change Email</a></li>
               <li><a href='#'>Change Pass</a></li>
            </ul>
        </li>
        <li>
          <a href='#'>Admin</a>
          <ul class='submenu'>
             <li><a href="#">Add User</a></li>
             <li><a href='#'>Change Permissions</a></li>
          </ul>
        </li>
      </ul>
   </li>
</ul>

CSS

#menu {list-style-type:none; }
#menu li {
    float:left;
    font-size:smaller;
    font-weight:bolder;  
    text-align:center;
    margin:0;
    width:110px;
}
        
acronym {border-bottom:dotted 1px black}
        
#menu li a{
    background:#87B4E3;
    padding:0 5px; height:35px;
    display:block; color:black;
    line-height:35px; vertical-align:middle;
}

#menu li a:hover{background:#c5e0f5}
#menu li a:focus{background:#c5e0f5}
        
ul.submenu{
    position:absolute;
    z-index:100; overflow:visible;
    list-style-type:none;    
    padding:0;    
    background:#87B4E3; margin:0;
}

#menu ul.submenu li{
    display:block; float:none !important;    
    margin:0;
    text-align:left; vertical-align:middle;
    border-bottom:dotted #bbb 1px;
    line-height:20px;
}

ul.submenu li a{background:#87B4E3;}
ul.submenu li a:hover{background:#c5e0f5}
ul.submenu li a:focus{background:#c5e0f5}
.submenu .submenu {
    position:absolute;z-index:150;
    left:110px;margin-top:-25px;
}

ul.menu-closed {visibility:hidden !important;}
ul.menu-opened {visibility:visible !important;}

JavaScript

var yaddm = new YADDM();