JSFiddle - React, Tailwind, and code Playground

by trickeedickee

HTML

<div id="menu">
      <div class="mainmenu">
        <ul>
          <li>
            <a href='path'>Home</a>
          </li>
          <li>
            <a href='path'>Country Garden</a>
          </li>
          <li>
            <a href='path'>Inner City Garden</a>
          </li>
          <li>
            <a href='path'>Winter Garden</a>
            <ul>
              <li>
                <a href='path'>Featured Products</a>
              </li>
              <li>
                <a href='path'>Best Sellers</a>
              </li>
              <li>
                <a href='path'>Special Offers</a>
              </li>
            </ul>
          </li>
          <li>
            <a href='path'>Water Garden</a>
          </li>
          <li>
            <a href='path'>Window Box</a>
          </li>
        </ul>
      </div>
    </div>

CSS

.mainmenu{
        clear: both;
        height: 42px;
        margin: 0;
        width: 980px;
    }
    .mainmenu ul{
        list-style: none;
        margin: 0;
        padding: 0;
        text-align:center;
    }
    .mainmenu li{
        display: inline-block;
        margin: 0;
        padding: 0;
        z-index:1000;
        height: 42px;
        position: relative;
    }
    .mainmenu li a{
        display: inline-block;
        height: 33px;
        padding: 9px 25px 0;
    } 
    .mainmenu ul ul{
        float: left;
        left: 0;
        padding: 5px 0 10px 0;
        position: absolute;
        text-align: left;
        top: 42px;
        width: 200px;
        z-index: 10000;
    }
    .mainmenu li li{
        clear: both;
        text-align: left;
        height: 30px;
    }
    .mainmenu ul li ul{
        display:none;
    }
    .mainmenu li ul li a {
        height: auto;
        padding: 2px 25px;
        width: 150px;
    }
    .mainmenu li ul li a, .mainmenu li.over li a {
        text-decoration: none !important;
    }
     .mainmenu li:hover ul, .mainmenu li.over ul {
        display: block;
}
.mainmenu li{
            background-color: #25abec;
            background-image:-moz-linear-gradient(top,#25abec,#1984b8);
            background-image:-webkit-gradient(linear,left top,left bottom,from(#25abec),to(#1984b8));
            filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr=#25abec,endColorStr=#1984b8);
        }