JSFiddle - React, Tailwind, and code Playground

by achilles03anil

HTML

<ul id="menu" class="my_white no_list_style my_inline p-t-8 li_pad_fix">
  <li>
    <a href="#">Home</a>
  </li>
  <li class="dropdown">
    <a href="#" data-toggle="dropdown" class="dropdown-toggle">About us</a>
    <ul class="dropdown-menu" id="menu1">
      <li>
        <a href="#page/test-new-cms">Test New CMS</a>
      </li>
      <li>
        <a href="#">Privacy Policy</a>
        <ul class="dropdown-menu sub-menu">
          <li>
            <a href="#page/privacy-inner">Privacy inner</a>
          </li>
        </ul>
      </li>
      <li>
        <a href="#">Know Your Future</a>
        <ul class="dropdown-menu sub-menu">
          <li>
            <a href="#page/test-aditya">Test Aditya</a>
          </li>
        </ul>
      </li>
      <li>
        <a href="#page/bizpalace-policy">Bizpalace policy</a>
      </li>
      <li>
        <a href="#page/terms-and-conditions">Terms and conditions</a>
      </li>
      <li>
        <a href="#page/brands">Brands</a>
      </li>
    </ul>
  </li>
  <li class="dropdown">
    <a href="#" data-toggle="dropdown" class="dropdown-toggle">Contact</a>
    <ul class="dropdown-menu" id="menu13">
      <li>
        <a href="#">Test on 15th</a>
        <ul class="dropdown-menu sub-menu">
          <li>
            <a href="#page/test-sarita">Test Sarita</a>
          </li>
        </ul>
      </li>
      <li>
        <a href="#page/test-cms-15th">Test CMS 15th</a>
      </li>
    </ul>
  </li>
  <li>
    <a href="#page/test-bikram">Test Folder</a>
  </li>
  <li>
    <a href="#contact">Test Contact</a>
  </li>
</ul>

CSS

.dropdown {
  position: relative;
}

.no_list_style {
  list-style: none;
}
#menu.my_inline li {
  display:inline;
  float:left;
  position:relative;
}
#menu.my_inline li li {
  display:block;
}

.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1000;
  display: none;
  float: left;
  min-width: 160px;
  list-style: none;
  padding: 5px 0;
  margin: 2px 0 0;
  font-size: 14px;
  text-align: left;
}

.dropdown-menu .sub-menu {
   position: absolute;
   display: none;
}



a {
  border-right: 1px solid #fff;
  background: #E0F574;
  color: #3B3B3B;
  text-decoration: none;
  padding: 0 10px;
}

/* SHOW SUBMENU 1 */

li:hover ul,
 li.over ul {
  display: block;
}

li:hover ul ul,
 li.over ul ul {
  display: none;
}