Creating a large Mega Menu with CSS - css

Question

I am trying to create a mega menu like those at http://rackspace.com. I have tried the tutorials given at some of the other questions about this already asked, but one of them used a lot of images, and one of them didn't work with the version of jQuery they linked to. I would like to keep this all CSS, but if I must I could use some JavaScript.
I don't understand how to make complex mega menu's but only the simple drop-down's. If someone could provide me with the code for this I would be very happy. I am learning CSS now and I think this will allow me to sharpen my knowledge as well.
Thanks,
Scott

Answer 1

Here is a very nice looking solution a quick Google search turned up. Haven't tried it myself but looks promising: http://net.tutsplus.com/tutorials/html-css-techniques/how-to-build-a-kick-butt-css3-mega-drop-down-menu/

Answer 2

Your question is too general. What you're trying to achieve is not going to happen with a simple HTML and CSS code that we can write here.
So you may be interested in this this jQuery plugin and CSS framework:
https://myflashlabs.github.io/24component-bars/
It helps you to create responsive mega menu, header, sidebar, and footer with lots functionalities fast and easy, without any hassle... It's exactly what you want :)
You don't need to code it yourself all from the beginning when there's already a solution out there!

Answer 3

Extremely quick sample of what you need to do:
http://jsfiddle.net/KqZd4/
I know this looks nothing like those, but that really is all the functionality you need. Just expand what is in the dropdown

Answer 4

<li class="main_list">Electronics
<ul>
<p class="category_header">Buy Any Electronics Item And Get Flat 50% OFF</p>
<ol>
<li>Mobiles</li>
<li>Item1</li>
<li>Item2</li>
</ol>
<ol>
<li>Tablets</li>
<li>Item1</li>
<li>Item2</li>
</ol>
</ul>
</li>
add more you want
then simple style
#main_menu
{
background-color:#1C1C1C;
float:left;
padding:0px;
width:700px;
height:50px;
line-height:50px;
margin-left:140px;
border-radius:5px;
}
#main_menu .main_list
{
color:white;
list-style-type:none;
float:left;
border-left:1px solid #666;
padding-left:27px;
padding-right:27px;
}
#main_menu .main_list:hover
{
color:#2E9AFE;
}
.main_list ul
{
background-color:white;
width:600px;
position:absolute;
left:150px;
width:700px;
padding:0px;
float:left;
padding-bottom:10px;
}
.main_list ul p
{
color:white;
background-color:#2E9AFE;
margin:0px;
text-align:left;
padding-left:10px;
font-size:20px;
font-weight:bold;
}
.main_list ul ol
{
float:left;
padding:0px;
list-style-type:none;
margin-left:30px;
}
.main_list ul ol li
{
line-height:25px;
font-weight:bold;
font-size:16px;
color:#2E9AFE;
}
if you have any problem understanding here is a complete tutorial
http://talkerscode.com/webtricks/mega-dropdown-menu-like-ecommerce-using-css.php

Answer 5

Try This
#import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css');
* {
box-sizing: border-box;
font-family: sans-serif;
}
body {
margin: 0;
}
/* Style Navigation bar */
.navbar {
display: -webkit-flex;
display: flex;
background-color: #e3e3e3;
}
.navbar a {
display: block;
text-decoration: none;
color: black;
padding: 1.1em 1em;
font-size: 1.1em;
border-bottom: 3px solid transparent;
transition: 0.1s;
}
.navbar > a:hover, .dropdown > a:hover {
border-bottom-color: #FA7D19;
}
/* Style Mega Menu */
.dropdown-content {
display: none;
position: absolute;
width: 90%;
left: 5%;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
overflow: hidden;
}
.dropdown-content .header {
padding: 16px;
color: #777;
background: white;
}
.dropdown:hover .dropdown-content {
display: block;
}
/* Create three equal columns that stacks next to each other */
.row {
display: -webkit-flex;
display: flex;
}
.column {
width: 100%;
padding: 10px;
background: #f8f8f8;
}
.column a {
color: black;
padding: 16px;
text-decoration: none;
display: block;
text-align: left;
}
.column a:hover {
background-color: #ddd;
}
/* Makes the three columns stack on top of each other instead of
next to each other (when screen width is 600px or less) */
#media screen and (max-width: 600px) {
.row {
flex-direction: column;
}
}
<div class="navbar">
Home
<div class="dropdown">
Dropdown <i class="fa fa-caret-down"></i>
<div class="dropdown-content">
<div class="header">
<h2>Mega Menu</h2>
</div>
<div class="row">
<div class="column">
<h3>Category 1</h3>
Link 1
Link 2
Link 3
</div>
<div class="column">
<h3>Category 2</h3>
Link 1
Link 2
Link 3
</div>
<div class="column">
<h3>Category 3</h3>
Link 1
Link 2
Link 3
</div>
</div>
</div>
</div>
Pricing
</div>
<div style="padding:10px 15px;">
<h1>Create a Mega Menu</h1>
<p>Hover over the "Dropdown" link to see the mega menu.</p>
</div>
Reference:How To Create a Mega Menu