JSFiddle - React, Tailwind, and code Playground

by allcaps

HTML

<ul id="mbtopmenuebul_table" class="mbtopmenuebul_menulist css_menu">
  <li class="topitem spaced_li"><div class="buttonbg gradient_button gradient20"><a>File</a></div>
  <ul class="gradient_menu gradient83">
  <li class="gradient_menuitem gradient23"><a title="">Save</a></li>
  <li class="gradient_menuitem gradient23"><a title="">Print</a></li>
  <li class="gradient_menuitem gradient23 last_item"><a title="">Close</a></li>
  </ul></li>
  <li class="topitem spaced_li"><div class="buttonbg gradient_button gradient20"><a>Edit</a></div>
  <ul class="gradient_menu gradient83">
  <li class="gradient_menuitem gradient23"><a title="">Add new</a></li>
  <li class="gradient_menuitem gradient23"><a title="">Delete</a></li>
  <li class="gradient_menuitem gradient23 last_item"><a title="">Clear all</a></li>
  </ul></li>
  <li class="topitem spaced_li"><div class="buttonbg gradient_button gradient20"><a>View</a></div>
  <ul class="gradient_menu gradient109">
  <li class="gradient_menuitem gradient23"><a title="">Next ></a></li>
  <li class="gradient_menuitem gradient23"><a title="">< Prev</a></li>
  <li class="gradient_menuitem gradient23"><a title=""><< First</a></li>
  <li class="gradient_menuitem gradient23 last_item"><a title="">Last >></a></li>
  </ul></li>
  <li class="topitem spaced_li"><div class="buttonbg gradient_button gradient20"><a>Actions</a></div>
  <ul class="gradient_menu gradient109">
  <li class="gradient_menuitem gradient23"><a class="with_arrow" title="">Export</a>
    <ul class="gradient_menu gradient57">
    <li class="gradient_menuitem gradient23"><a title="">Excel</a></li>
    <li class="gradient_menuitem gradient23 last_item"><a title="">HTML</a></li>
    </ul></li>
  <li class="gradient_menuitem gradient23"><a class="with_arrow" title="">Reports</a>
    <ul class="gradient_menu gradient57">
    <li class="gradient_menuitem gradient23"><a title="">Metrics</a></li>
    <li class="gradient_menuitem gradient23 last_item"><a title="">Item</a></li>
   ...

CSS

#mbtopmenuebul_table {
  margin: 0px;
  line-height: 0px;
  font-size: 0px;
  display: inline-block;
  width: 100%;
  padding: 2px; 
  border-left: none;
  border-right: none;
  border-top: 1px solid #B0B5BB;
  border-bottom: 1px solid #B0B5BB;

  background-color: transparent;
  border-collapse: separate;
  background-image: url('wrapper_bg.png');
  background-repeat: repeat-x;
  background: -moz-linear-gradient(top, #EDF4FE 0%, #BFDAFC 100%);
  background: -webkit-linear-gradient(top, #EDF4FE 0%, #BFDAFC 100%);
  background: -ms-linear-gradient(top, #EDF4FE 0%, #BFDAFC 100%);
  background: linear-gradient(top, #EDF4FE 0%, #BFDAFC 100%);
}
#mbtopmenuebul_table li a {
  line-height: 15px;
  font-size: 12px;
  font-family: Arial,sans-serif;
  text-decoration: none;
  color: #333333;
  font-style: normal;
  font-weight: normal;
  padding: 2px;
  display: block;
  cursor: pointer;
  white-space: nowrap;
}

#mbtopmenuebul_table li div.buttonbg {
  height: 18px;
  width: 58px;
  line-height: 0;
  background-color: transparent;
  border-style: solid;
  border-color: transparent;
  border-width: 1px;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
  text-align: center;
}

#mbtopmenuebul_table li:hover div.buttonbg a, #mbtopmenuebul_table li.expanded a.topitem, #mbtopmenuebul_table li.active a.topitem,
#mbtopmenuebul_table li.itemhot a.topitem, #mbtopmenuebul_table li a:hover {
  color: #000;
  text-decoration: none;
}


#mbtopmenuebul_table li.expanded div.buttonbg, #mbtopmenuebul_table li.active div.buttonbg, #mbtopmenuebul_table li.itemhot div.buttonbg, #mbtopmenuebul_table li:hover div.buttonbg {
  background-color: transparent;
  border-color: #7DA2CE;
  color: blue;
}

#mbtopmenuebul_table ul li a {
  color: #333333;
  font-family: Arial,sans-serif;
  font-size: 12px;
  line-height: 15px;
  font-style: normal;
  font-weight: normal;
  text-decoration: none;
  display: block;
  vertical-align: middle;
  white-space: nowrap;
}

#mbtopmenuebul_table ul li:hover...