JSFiddle - React, Tailwind, and code Playground

by José Betencourt

HTML

<div id="NavbarMenu">
  <div id="NavbarMenuleft">
    <ul id="nav">

      <li><a href="">AAAAAA &#9662;</a>
        <ul class="scroll">
          <li><a href="">111111111111111</a></li>
          <li><a href="">2222</a></li>
          <li><a href="">33333333</a></li>
          <li><a href="">444444444444</a></li>
        </ul>
      </li>
      <li>

        <li><a href="">BBBBBB &#9662;</a>
          <ul class="scroll">
            <li><a href="">555555</a></li>
            <li><a href="">6666666666</a></li>
            <li><a href="">7777777</a></li>
            <li><a href="">888888888888888</a></li>
          </ul>
        </li>
        <li>

          <li><a href="">CCCCCC &#9662;</a>
            <ul class="scroll">
              <li><a href="">999999</a></li>
              <li><a href="">000000</a></li>
              <li><a href="">000000</a></li>
              <li><a href="">00000000</a></li>
            </ul>
          </li>
          <li>

            <li><a href="">DDDDDD &#9662;</a>
              <ul class="scroll">
                <li><a href="">111111111111111</a></li>
                <li><a href="">22222222222222222</a></li>
                <li><a href="">33333333333333333333</a></li>
                <li><a href="">44444444444444444</a></li>
              </ul>
            </li>
            <li>

              <li><a href="">EEEEEE &#9662;</a>
                <ul class="scroll">
                  <li><a href="">555</a></li>
                  <li><a href="">6666</a></li>
                  <li><a href="">777</a></li>
                  <li><a href="">888</a></li>
                </ul>
              </li>
              <li>

                <li><a href="">FFFFFF &#9662;</a>
                  <ul class="scroll">
                    <li><a href="">99999999999</a></li>
                    <li><a href="">00000000</a></li>
                    <li><a href="">0000000000000</a></li>
                    <li><a href="">0000</a></li>
                  </ul>
     ...

CSS

#NavbarMenu {
background: #cc0000;/*--COR DE FUNDO DO MENU--*/
width: 1022px;/*--TAMANHO DO MENU--*/
float: left;
height: 35px;/*--ALTURA DAS CASAS--*/
font-size: 13px;/*--TAMANHO DA FONTE--*/
font-family: arial;/*--TIPO DA FONTE--*/
color: #fff;/*--cor do link--*//*--COR DA FONTE--*/
font-weight: none;
margin: 0;
padding: 10;
text-transform: none;
}
#NavbarMenuleft {
width: 100%;
float: left;
margin: 0;
padding: 0;
}
#nav {
margin: 0;
padding: 0;
}
#nav ul {
float: left;
list-style: yes;
margin: 0;
padding: 0;
}
#nav li {
list-style: none;
margin: 0;
padding: 0;
}
#nav li a, #nav li a:link, #nav li a:visited {
color: #FFF; /*--edite cor do link--*/
display: block;
font-size: 13px;/*--tamanho da fonte do link--*/
font-family: arial;
font-weight: bold;
text-transform: none;
margin: 0;
padding: 9px 15px 8px;
border-right: 1px solid #FFFFFF;/*--COR E TIPO DE BORDA--*/
}
#nav li a:hover, #nav li a:active {
background: #ffffff;/*--COR DE FUNDO EM ESTADO HOVER--*/
color: #FFF; /*--COR DA FONTE EM ESTADO HOVER--*/
margin: 0;
padding: 9px 15px 8px;
text-decoration: yes;  color: #000000;
}
#nav li li a, #nav li li a:link, #nav li li a:visited {
background: #cc0000;/*--COR DE FUNDO DO SUB MENU--*/
width: auto;
color: #FFF; /*--cor do link--*/
font-size: 13px;/*--TAMANHO DA FONTE DO SUB MENU--*/
font-family: Arial;/*--FONTE DO SUB MENU--*/
font-weight: normal;
text-transform: none;
float: none;
margin: 0;
padding: 7px 10px;
border-bottom: 1px solid #cc0000;
border-left: 2px solid #cc0000;
border-right: 2px solid #cc0000;
}
#nav li li a:hover, #nav li li a:active {
background: #ffffff;/*--COR DE FUNDO DO SUB MENU EM ESTADO HOVER--*/
color: #FFF; /*--COR DA FONTE DO SUB MENU EM ESTADO HOVER--*/
text-transform: yes;  color: #000000; font-weight: bold;
padding: 7px 10px;
}
#nav li {float: left; padding: 0;
}
#nav li ul {z-index: 1000; position: absolute; left: -999em; height: auto; width: 132px; margin: 0; padding: 0;
}
#nav li ul a {width: 100px;
}
#nav li ul ul {margin: -32px...