JSFiddle - React, Tailwind, and code Playground

HTML

<ul id="mainmenu">
     <li id="liHome" class="active">
         <a href="#item-x1y1" class="panel" rel="none" id="Home">Home</a>
     </li>
     <li id="liServices" class=" ">
         <a href="#item-x1y2" class="panel" rel="SubMenuY2" id="Services">Services</a>
         
         <ul style="" id="SubMenuY2" class="submenu">
             <li><a href="#">Sub-item 1</a></li>
             <li><a href="#">Sub-item 2</a></li>
         </ul>

     </li>
     <li id="liEnvironment">
         <a href="#item-x1y3" class="panel" rel="none" id="Environment">Environment</a>
     </li>
     <li id="liCareer">
         <a href="#item-x1y4" class="panel" rel="none" id="Career">Career</a>
     </li>
     <li id="liContact">
         <a href="#item-x1y5" class="panel" rel="none" id="Contact">Contact</a>
     </li>
 </ul>

CSS

body, html{
    height:100%;
}

#mainmenu{
    background:black;
    color: white;
    width:130px;
    position:relative;
    top:0;
    height:100%
}

#mainmenu li a {
    color:white;
}

ul.submenu{
    position:absolute;
    left: 130px; top: 0;
    background:blue;
    width:130px;
    height: 100%;
}
ul.submenu li{
  position: relative;
  border-bottom: 1px solid #5e6775;
  padding-left: 0.9em;
  list-style-type: none;
  margin: 0;
  padding: 0;
  line-height: 1.5;
}