How to create a mega dropdown menu in html css with source code

HTML CODE 

	<nav>
		<ul class="menu">
			<li><a href="#">Home</a></li>
			<li><a href="#">Blogs</a></li>
			<li><a href="#">About </a></li>
			<li><a href="#">Contact</a></li>
			<!-- dropdown menu start here  -->
			<li class="dropdown"><a href="#">Tutorials</a>

				<div class="drop-container">

					<div class="drop-items">
						<ul>
							<h2>HTML & CSS</h2>
							<li><a href="#">Learn HTML</a></li>
							<li><a href="#">Learn CSS</a></li>
							<li><a href="#">Learn RWD</a></li>
							<li><a href="#">Learn COLORS</a></li>
							<li><a href="#">Learn SASS</a></li>

						</ul>
						
					</div>
					<div class="drop-items" style="border-left: 1px solid black;border-right: 1px solid black;">
						<ul>
							<h2>JAVASCRIPT</h2>
							<li><a href="#">Learn JAVASCRIPT</a></li>
							<li><a href="#">Learn REACT JS</a></li>
							<li><a href="#">Learn ANGULAR JS</a></li>
							<li><a href="#">Learn VIEW JS</a></li>
							<li><a href="#">Learn JQUERY</a></li>

						</ul>
						
					</div>
					<div class="drop-items">
						<ul>
							<h2>PROGRAMMING</h2>
							<li><a href="#">Learn PYTHON</a></li>
							<li><a href="#">Learn C++</a></li>
							<li><a href="#">Learn JAVA</a></li>
							<li><a href="#">Learn C</a></li>
							<li><a href="#">Learn C#</a></li>

						</ul>
						
					</div>
					
					
				</div>

			</li>
		</ul>
	</nav>

    

CSS CODE

	body{
			padding: 0%;
			margin:0%;
            font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
            text-decoration: none;
		}
		nav{
			background-color: black;
			height: 26px;
			padding: 10px;

		}
		.menu{
			padding: 0;

			margin: 0;
		}
		.menu li {
			list-style: none;
			float: left;

		}
		.menu li a{
			text-decoration: none;
			color:white;
			font-size: 1.4rem;
			padding: 10px;
		}
		.menu li a:hover{
			background-color: crimson;
		}
		.drop-container{
			background:#726E6D;
			width: 100%;
			position: absolute;
			left: 0;
			margin-top: 8px;
			display: none;
			align-items: center;
			box-shadow: 0 0 10px black;

		}
		.drop-items{
			width: 31%;
			margin: auto;
			padding: 10px;
		}
		.drop-items ul {
			padding: 0;
			margin: 0;

		}

		.drop-items ul li{
			float: none;
			padding: 10px;

		}
		.drop-items ul li a:hover{
			background-color: transparent;
		}
		.drop-items ul li:hover{
			background-color: crimson;
			transition: all 300ms ease;
		}
		.dropdown:hover .drop-container{
			display: flex;
		}
    

Javascript code