JSFiddle - React, Tailwind, and code Playground

by Stefan Sturm

HTML

<div class="header_btm">
  <div class="wrap">
    <div class="header_sub">
      <div class="h_menu">
        <div class="navd">
          <ul>
            <li class="active"><a href="index.html">Home</a>
            </li>|
            <li><a href="#">Paint Brands</a>
              <ul>
                <li><a href="#">hi</a>
                </li>
                <li><a href="#">hi</a>
                </li>
                <li><a href="#">hi</a>
                </li>
              </ul>
            </li>|
            <li><a href="shoes.html">Paint Services</a>
            </li>|
            <li><a href="sale.html">Decor Solutions</a>
            </li>|
            <li><a href="service.html">Waterproofing Solutions</a>
            </li>|
            <li><a href="contact.html">Contact us</a>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
<div class="header_btm">
  <div class="wrap">
    <div class="header_sub">
      <div class="h_menu">
        <div class="navd">
          <ul>
            <li class="active"><a href="index.html">Home</a>
            </li>|
            <li><a href="#">Paint Brands</a>
              <ul>
                <li><a href="#">hi</a>
                </li>
                <li><a href="#">hi</a>
                </li>
                <li><a href="#">hi</a>
                </li>
              </ul>
            </li>|
            <li><a href="shoes.html">Paint Services</a>
            </li>|
            <li><a href="sale.html">Decor Solutions</a>
            </li>|
            <li><a href="service.html">Waterproofing Solutions</a>
            </li>|
            <li><a href="contact.html">Contact us</a>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>

CSS

.header_btm {
  background: #3B3F5E;
}
.header_sub {
  padding: 0 2%;
}
/* start menu */

.h_menu {
  font-family: 'bebas_neueregular';
  float: left;
  color: #ffffff;
  font-size: 1.2em;
  z-index: 999;
  position: relative;
}
.h_menu ul li {
  display: inline;
  z-index: 999;
}
.h_menu ul li a {
  display: inline-block;
  padding: 14px 18px;
  font-size: 1.2em;
  text-transform: uppercase;
  color: #ffffff;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
.h_menu ul li a:hover {
  color: #f0f0f0;
}
.navd {
  z-index: 999;
}
.navd ul {
  position: relative;
  z-index: 999;
}
.navd ul li {
  position: relative;
  z-index: 999;
}
.navd ul ul {
  float: left;
  display: none;
}
.navd ul li:hover > ul {
  display: block;
  position: absolute;
}
.navd ul li ul li {
  display: block;
}
.navd ul li ul li a {
  background: #3B3F5E;
  padding: 10px;
  color: #FFF;
  border-bottom: 1px solid black;
  border-left: 10px solid white;
  min-width: 90px;
  display: block;
  text-decoration: none;
}
.navd ul li ul li a:hover {
  color: #fff;
  border-left: 10px solid #3B3F5E;
  text-decoration: none;
}