Jump to content

I am having problem to create mega menu


m.s_shohan

Recommended Posts

Hi, I am having some problem while creating a mega dropdown menu. I want the mega-dropdown-content to be divided to 4 column and 3column will be for the menu and rest 1 column will be for an image. But this is not the expected result. Here is the code. Please tell how can I fix it? Thank you.

<!DOCTYPE html>
<html>
	<head>
		<link rel= "stylesheet" href= "mega%20menu%20copy%20copy.css"/>
		<link rel= "stylesheet" href= "font-awesome-4.7.0/css/font-awesome.min.css"/>
		<style>
			.menu-container,
.mega-menu,
.nav,
.nav li,
.nav a,
.nav div{
	margin: 0;
	padding: 0;
	border: none;
	outline:none;
}
.nav {
	position: relative;
}
.nav a {
	text-decoration: none;
}
.nav li {
	list-style: none;
}
a {
	color: white;
}
.menu-container {
	position: relative;
	width: 100%;
}
.mega-menu {
	position: absolute;
	width: 48%;
	left: 26%;
	height: 40px;
	background-color: red;
}
.nav > li {
	display: inline-block;
	height: 40px;
	font-size: 20px;
	font-weight: bold;
}
.nav > li > a {
	display: block;
	padding: 10px 10px;
	color: white;
	text-align: left;
	vertical-align: center;
	margin-bottom: 10px;
}
.mega-menu-content, .dropdown {
	padding-top: 60px;
	position: absolute;;
	width: 100%;
	display: none;
	background-color: white;
	color: black;
	font-size: 16px;
	border: 2px solid lightgrey;
}
.mega-menu-content > ul > li:first-child,.dropdown > ul >li:first-child {
	padding-top: 10px;
}
.mega-menu-content > ul> li, .dropdown > ul > li {
	display: block;
	min-width: 120px;
	min-height: 40px;
	margin: 0;
	padding: 0;
}
.mega-menu-content > ul > li > a, .dropdown > ul > li > a {
	color: red;
	font-size: 16px;
	min-width: 120px;
	padding: 8px 10px;
	border: 1px solid lightgrey;
}
.mega-menu-content {
	column-count: 3;
	column-width: 33%;
	column-gap: 0;
}
.mega-menu-content > ul > li > a:hover, .dropdown > ul > li > a:hover {
	background-color: lightgrey;
}
.nav > li:hover .mega-menu-content, .nav > li:hover .dropdown{
	display: block;
}
		</style>
	</head>
	<body>
		<div class= "menu-container">
		<div class= "mega-menu">
			<ul class= "nav">
				<li><a href= "#">Home</a></li>
				<li><a href= "#">Clothing <i class="fa fa-chevron-circle-down" aria-hidden="true"></i></a>
					<div class= "mega-menu-content">
						
							<ul>Men<hr/>
							<li><a href= "#">T-shirts</a></li>
							<li><a href= "#">Shirts</a></li>
							<li><a href= "#">Pants</a></li>
							<li><a href= "#">Shoes</a></li>
							<li><a href= "#">Sunglasses</a></li>
							<li><a href= "#">Caps</a></li>
							<li><a href= "#">Jewelry</a></li>
							<li><a href= "#">Others</a></li>
						</ul>
						<ul>Women<hr/>
							<li><a href= "#">Jewelry</a></li>
							<li><a href= "#">Coats & Jackets</a></li>
							<li><a href= "#">Tops & Blouses</a></li>
							<li><a href= "#">Intimate & Sleep</a></li>
							<li><a href= "#">Jeans</a></li>
							<li><a href= "#">Pants</a></li>
							<li><a href= "#">Skirts</a></li>
							<li><a href= "#">Sweaters</a></li>
						</ul>
						
							<ul>Others<hr/>
							<li><a href= "#">Boys</a></li>
							<li><a href= "#">Girls</a></li>
							<li><a href= "#">Baby</a></li>
							<li><a href= "#">Luggage</a></li>
						</ul>
						<ul>From Popular Sites<hr/>
							<li><a href= "#">Amazon</a></li>
							<li><a href= "#">Ebay</a></li>
							<li><a href= "#">Etsy</a></li>
							<li><a href= "#">Shoppify</a></li>
						</ul>
						
						<img src= "#" height= "100px" width= "100px" style= "float: right;"/>
					</div>
				</li>
				<li><a href= "#">Products <i class="fa fa-chevron-circle-down" aria-hidden="true"></i></a>
					<div class= "mega-menu-content">
						<img src= "#" height= "100%" width= "25%" style= "float: left;"/>
						<hr/>
						
						<ul>Electronics & Computers<hr/>
							<li><a href= "#">TV & Video</a></li>
							<li><a href= "#">Cellphone & Camera</a></li>
							<li><a href= "#">Head Phones</a></li>
							<li><a href= "#">Video Games</a></li>
							<li><a href= "#">Computers & Tablets</a></li>
							<li><a href= "#">Monitors</a></li>
							<li><a href= "#">Schools & Office Supplies</a></li>
							<li><a href= "#">Trade In Your Electronics</a></li>
							<hr/></ul>
						    <ul>Health & Beauty<hr/>
							<li><a href= "#">All Beauty</a></li>
							<li><a href= "#">Luxury Beauty</a></li>
							<li><a href= "#">Specialty Diets</a></li>
							<li><a href= "#">Health,Household & Baby care</a></li>
							<li><a href= "#">Coupons</a></li>
								<hr/></ul>
						<ul>Sports & Outdoors<hr/>
							<li><a href= "#">Athletic Clothing</a></li>
							<li><a href= "#">Exercise & Fitness</a></li>
							<li><a href= "#">Hunting & Fishing</a></li>
							<li><a href= "#">Team Sports</a></li>
							<li><a href= "#">Cycling</a></li>
							<li><a href= "#">Water Sports</a></li>
							<li><a href= "#">Winter Sports</a></li>
							<li><a href= "#">All Sports</a></li>
						</ul>
						
					</div>
				</li>
				<li><a href= "#">Gifts <i class="fa fa-chevron-circle-down" aria-hidden="true"></i></a>
					<div class="dropdown">
						<ul>
							<li><a href= "#">Games</a></li>
							<li><a href= "#">Books</a></li>
							<li><a href= "#">Show Piece</a></li>
							<li><a href= "#">Kids Birthday</a></li>
						</ul>
					</div>
				</li>
				<li><a href= "#">Arts & Crafts</a></li>
				<li><a href= "#">Services</a></li>
			</ul>
		</div>
		</div>
	</body>
</html>
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...