JSFiddle - React, Tailwind, and code Playground

by Teuta Koraqi

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="//cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/css/bootstrap.css">
<script src="//cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/js/bootstrap.js"></script>
<div class="header">
      <div class="container">
          <nav class="navbar navbar-light bg-faded">
  <a class="navbar-brand" href="#">Navbar</a>
  <ul class="nav navbar-nav">
    <li class="nav-item active">
      <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Sub Menu</a>
      <div class="big-menu">
                    <div class="big-menu-body bg-img-2">

                      <div class="row big-menu-container">
                        <div class="col-md-8">
                          <div class="skew-text">
                            <div class="big-menu-nav two-col">
                                <div class="row">
                                  <div class="col-md-6">
                                    <h5>Categories</h5>
                                    <ul class="sm-nav-item">
                                      <li><a href="">Category Item</a></li>
                                      <li><a href="">Category Item</a></li>
                                      <li><a href="">Category Item</a></li>
                                      <li><a href="">Category Item</a></li>
                                      <li><a href="">Category Item</a></li>
                                      <li><a href="">Category Item</a></li>
                                      <li><a href="">Category Item</a></li>
                                    </ul>
                                  </div>

                                  <div class="col-md-6">
                                    <h5>Our work</h5>
     ...

CSS

.header .navbar .nav .nav-item div.big-menu {
  position: absolute;
  display: block;
  opacity: 0;
  width: 100%;
  max-height: 450px;
  top: 80px;
  left: 0;
  z-index: 399;
  visibility: hidden;
  overflow: hidden;
  background: #ffffff;
  color: #181717;
  -webkit-transition: all 0.3s ease 0.15s;
  transition: all 0.3s ease 0.15s;
}
nav.navbar {
  position: relative;
  z-index: 2;
}
.header .navbar .nav .nav-item div.big-menu .big-menu-body {
  position: relative;
  overflow: hidden;
  background-color: white
}

.header .navbar .nav .nav-item:hover > div {
  opacity: 1;
  visibility: visible;
  overflow: visible;
}

/* Used :after to apply overlay */
.header .navbar .nav .nav-item:hover > div:before {
  content: '';
  position: fixed;
  z-index: 1;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.6);
}