<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
<div class="main-menu">
<ul>
<li class="active">
<a href="javascript:void(0);">Home</a>
</li>
<li>
<a href="javascript:void(0);">About Us</a>
</li>
<li class="dropdown-list">
<a href="javascript:void(0);" class="rugs-menu">Collection</a>
<div class="mega-menu-block menu2-mega-menu">
<div class="container">
<ul class="mega-menu">
<li>
<div class="menu2-mega-box">
<div class="mega-heading">SHOP ALL</div>
<div class="mega-heading">NEW</div>
</div>
<div class="menu2-mega-box">
<div class="mega-heading">Collection 1</div>
<ul class="mega-menu-list">
<li>
<a href="javascript:void(0);">Collection menu 1</a>
</li>
<li>
<a href="javascript:void(0);">Collection menu 1</a>
</li>
<li>
<a href="javascript:void(0);">Collection menu 1</a>
</li>
<li>
<a href="javascript:void(0);">Collection menu 1</a>
</li>
<li>
<a href="javascript:void(0);">Collection menu 1</a>
</li>
</ul>
</div>
<div class="menu2-mega-box">
<div class="mega-heading">Collection 2</div>
<ul class="mega-menu-list">
<li>
<a href="javascript:void(0);">Collection menu 2</a>
</li>
<li>
<a href="javascript:void(0);">Collection menu 2</a>
</li>
<li>
<a href="javascript:void(0);">Collection menu 2</a>
</li>
<li>
<a href="javascript:void(0);">Collection menu 2</a>
</li>
<li>
<a href="javascript:void(0);">Collection menu 2</a>
</li>
<li>
<a href="javascript:void(0);">Collection menu 2</a>
</li>
<li>
<a href="javascript:void(0);">Collection menu 2</a>
</li>
</ul>
</div>
<div class="menu2-mega-box">
<div class="mega-heading">Collection 3</div>
<ul class="mega-menu-list">
<li>
<a href="javascript:void(0);">Collection menu 3</a>
</li>
</ul>
</div>
<div class="menu2-mega-box">
<div class="mega-new-product">
<a href="javascript:void(0);">
<img src="https://i.picsum.photos/id/266/366/271.jpg">
<div class="mn-product-heading">Collection menu 3</div>
</a>
</div>
</div>
</li>
</ul>
</div>
</div>
</li>
<li class="dropdown-list">
<a href="javascript:void(0);" class="custions-menu">Collection 4</a>
<div class="mega-menu-block menu3-mega-menu">
<div class="container">
<ul class="mega-menu">
<li>
<div class="menu3-mega-block">
<div class="menu3-mega-box">
<div class="mega-new-product">
<a href="javascript:void(0);">
<img src="https://i.picsum.photos/id/266/366/271.jpg">
<div class="mn-product-heading">Collection menu 4</div>
</a>
</div>
</div>
</div>
<div class="menu3-mega-block">
<div class="menu3-mega-box">
<div class="mega-new-product">
<a href="javascript:void(0);">
<img src="https://i.picsum.photos/id/288/366/271.jpg">
<div class="mn-product-heading">Collection menu 4</div>
</a>
</div>
</div>
</div>
<div class="menu3-mega-block">
<div class="menu3-mega-box">
<div class="mega-new-product">
<a href="javascript:void(0);">
<img src="https://i.picsum.photos/id/300/366/271.jpg">
<div class="mn-product-heading">Collection menu 4</div>
</a>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
</li>
<li class="dropdown-list">
<a href="javascript:void(0);" class="our-story-menu">About Company</a>
<div class="mega-menu-block story-mega-menu">
<div class="container">
<ul class="mega-menu">
<li>
<div class="our-story-block">
<div class="os-left">
<iframe width="100%" height="322" src="https://www.youtube.com/embed/C0DPdy98e4c" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<div class="os-right">
<div class="os-heading">About Company</div>
<div class="content">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
<p>It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
</div>
<a href="about.html" class="gray-btn">READ MORE</a>
</div>
</div>
</li>
</ul>
</div>
</div>
</li>
</ul>
</div>
</div>
*, *::before, *::after {
box-sizing: border-box;
}
.main-menu {
margin-left: auto;
margin-right: 50px;
}
.main-menu>ul {
display: flex;
align-items: center;
}
.main-menu ul li {
/*position: relative;*/
list-style: none;
}
.main-menu>ul>li>a {
color: #3d3d3d;
font-size: 12px;
text-transform: uppercase;
display: block;
padding: 6px 10px;
position: relative;
font-family: 'Raleway', sans-serif;
}
.main-menu ul li:last-child a {
padding-right: 0;
}
.main-menu>ul>li>a:before {
content: "";
position: absolute;
bottom: 0px;
left: 50%;
height: 2px;
background: #9e9e9e;
transform: translate(-50%, 0);
width: 0;
transition: all 0.5s ease-in-out 0s;
}
.main-menu>ul>li:hover>a:before,
.main-menu>ul>li.active>a:before {
width: 50%;
}
/**Mega Menu**/
.mega-menu-block {
background: #f3f1eb;
margin: 0;
position: absolute;
z-index: 2;
left: 0;
width: 100%;
padding: 40px 0;
font-family: 'Raleway', sans-serif;
box-shadow: 0 8px 10px rgba(0, 0, 0, 0.2);
display: none;
}
.mega-menu>li {
padding: 0;
display: flex;
}
.mega-menu .menu2-mega-box {
width: 17%;
}
.mega-menu .menu2-mega-box:last-child {
width: 32%;
}
.mega-heading {
margin-bottom: 12px;
color: #535250;
font-family: 'Raleway', sans-serif;
font-size: 15px;
}
.mega-menu-list {
font-weight: 500;
}
.mega-menu-list li a {
display: block;
padding: 2px 0;
color: #414140;
font-size: 14px;
font-family: 'Raleway', sans-serif;
}
.mega-new-product {
position: relative;
}
.mn-product-heading {
position: absolute;
left: 25px;
right: 25px;
bottom: 25px;
font-family: 'Raleway', sans-serif;
background: rgba(0, 0, 0, 0.5);
color: #fff;
padding: 9px 12px;
font-size: 20px;
letter-spacing: 1px;
text-align: center;
}
.menu3-mega-block {
width: 33.33%;
padding: 0 25px;
}
.menu3-mega-box .mn-product-heading {
font-family: 'Raleway', sans-serif;
font-size: 17px;
padding: 7px 12px;
}
.our-story-block {
display: flex;
margin: 0 -25px;
}
.our-story-block .os-left {
width: 50%;
padding: 0 25px;
}
.our-story-block .os-right {
width: 50%;
padding: 0 25px;
}
.os-heading {
font-family: 'Raleway', sans-serif;
font-size: 18px;
font-weight: 800;
letter-spacing: 1px;
margin-bottom: 20px;
}
.gray-btn {
background: #7a7a77;
color: #fff;
font-size: 14px;
font-family: 'Raleway', sans-serif;
font-weight: 500;
display: inline-block;
padding: 6px 20px;
letter-spacing: 1px;
margin-top: 15px;
border: solid 2px #7a7a77;
transition: all 0.5s ease-in-out 0s;
}
.gray-btn:hover,
.gray-btn:focus {
color: #7a7a77;
background: transparent;
}
.main-menu ul li.dropdown-list:hover .mega-menu-block {
display: block;
}
.main-menu li a {
text-decoration: none;
}
.mega-new-product img {
width: 100%;
}
.mega-menu-list {
padding-left: 0;
}
