How to Create a CSS3 Mega Drop-Down Menu

Preview

Topic: CSS3
Difficulty: Intermediate
Estimated Completion Time: 1 hour

Hello guys! In this tutorial I will teach you how to create a pure CSS3 Mega Menu. Mega Menus are usually used on corporate/e-commerce websites, but they become more popular because they are a great way to display/organize content. The design of this mega menu can be found on the The Bricks UI. Let’s start with the HTML markup…

HTML Markup

Create an unordered list with the class “nav” (<ul>), then for each menu item we will add a new list item (<li>) with an anchor tag (<a>) inside. If you want the menu item to be a mega menu just add a <div> inside of the <li>.

<ul class="nav">
    <li>
        <a href="#">What's new</a>
        <div>
            Mega Menu Content...
        </div>
    </li>
    <li><a href="#">Top rated</a></li>
    <li>
        <a href="#">Earnings</a>
        <div>
            Mega Menu Content...
        </div>
    </li>
    <li><a href="#">Rings</a></li>
    <li><a href="#">Bracelets</a></li>
    <li><a href="#">All Categories</a></li>
    <li class="nav-search">
        <form action="#">
            <input type="text" placeholder="Search...">
            <input type="submit" value="">
        </form>
    </li>
</ul>

Reset and Container Basic Styles

As the default styles of the browsers differ from each other, we’ll add some reset styles to keep consistency between them and avoid future issues.

.nav,
.nav a,
.nav ul,
.nav li,
.nav div,
.nav form,
.nav input {
    margin: 0;
    padding: 0;
    border: none;
    outline: none;
}

.nav a { text-decoration: none; }

.nav li { list-style: none; }

Then we will add some basic styles to the menu container and float the list items to the left in order to show them on the same line.

.nav {
    display: inline-block;
    position: relative;
    cursor: default;
    z-index: 500;
}

.nav > li {
    display: block;
    float: left;
}

Styling the Menu Links

We will start with the common styles like padding, height, position, etc. Then we’ll set the typography styles such as font size, color, text shadow, etc. We’ll also set a background color and a left and right border. To keep the styles transitions smooth we’ll add a CSS3 transition. Note that we set the same property five times, this is required because this property is not fully implemented in all browsers yet, and as this property is on testing, all the different browsers use a prefix before the property. So if you want to support some current and older browsers use this prefixes.

.nav > li > a {
    position: relative;
    display: block;
    z-index: 510;
    height: 54px;
    padding: 0 20px;
    line-height: 54px;

    font-family: Helvetica, Arial, sans-serif;
    font-weight: bold;
    font-size: 13px;
    color: #fcfcfc;
    text-shadow: 0 0 1px rgba(0,0,0,.35);

    background: #372f2b;
    border-left: 1px solid #4b4441;
    border-right: 1px solid #312a27;

    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    -o-transition: all .3s ease;
    -ms-transition: all .3s ease;
    transition: all .3s ease;
}

For the hover state we will only change the background color. To finish the menu links styling we will add rounded corners to the first link using the :first-child pseudo selector and remove the left border.

.nav > li:hover > a { background: #4b4441; }

.nav > li:first-child > a {
    border-radius: 3px 0 0 3px;
    border-left: none;
}

Styling the Search Form

We’ll start with the form container: set the position to relative, add a left border like we have on the menu links and set the width to inherit. By setting the width to inherit it will use the width from the child inputs.

.nav > li.nav-search > form {
    position: relative;
    width: inherit;
    height: 54px;
    z-index: 510;
    border-left: 1px solid #4b4441;
}

Then we will style the text input: float it to the left, set the height, padding, etc. To hide the text input we will set the width to 1px and remove the left and right padding. On the :hover and :focus state we will update the width and padding values.

.nav > li.nav-search input[type="text"] {
    display: block;
    float: left;
    width: 1px;
    height: 24px;
    padding: 15px 0;
    line-height: 24px;

    font-family: Helvetica, Arial, sans-serif;
    font-weight: bold;
    font-size: 13px;
    color: #999999;
    text-shadow: 0 0 1px rgba(0,0,0,.35);

    background: #372f2b;

    -webkit-transition: all .3s ease 1s;
    -moz-transition: all .3s ease 1s;
    -o-transition: all .3s ease 1s;
    -ms-transition: all .3s ease 1s;
    transition: all .3s ease 1s;
}

.nav > li.nav-search input[type="text"]:focus { color: #fcfcfc; }

.nav > li.nav-search input[type="text"]:focus,
.nav > li.nav-search:hover input[type="text"] {
    width: 110px;
    padding: 15px 20px;

    -webkit-transition: all .3s ease .1s;
    -moz-transition: all .3s ease .1s;
    -o-transition: all .3s ease .1s;
    -ms-transition: all .3s ease .1s;
    transition: all .3s ease .1s;
}

The styles for the submit input are similar to the text input, we’ll only set a fixed width and height, add a background icon and rounded corners using the border-radius property. We have also set transitions for both inputs in order to have some smooth and nice animations.

.nav > li.nav-search input[type="submit"] {
    display: block;
    float: left;
    width: 20px;
    height: 54px;
    padding: 0 25px;
    cursor: pointer;

    background: #372f2b url(../img/search-icon.png) no-repeat center center;

    border-radius: 0 3px 3px 0;

    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    -o-transition: all .3s ease;
    -ms-transition: all .3s ease;
    transition: all .3s ease;
}

.nav > li.nav-search input[type="submit"]:hover { background-color: #4b4441; }

img 1

The Mega Dropdowns

This is one of the most important parts. We will start by setting the position to absolute, width to 100%, display to block and the top and left values. Then we will hide the dropdowns using the opacity, visibility and overflow properties. After that we will add a background color, rounded corners and some transitions. The reason we will be using this three properties to hide de dropdowns and not the display: none; is because if we use display: none; the transitions won’t work.

.nav > li > div {
    position: absolute;
    display: block;
    width: 100%;
    top: 50px;
    left: 0;

    opacity: 0;
    visibility: hidden;
    overflow: hidden;

    background: #ffffff;
    border-radius: 0 0 3px 3px;

    -webkit-transition: all .3s ease .15s;
    -moz-transition: all .3s ease .15s;
    -o-transition: all .3s ease .15s;
    -ms-transition: all .3s ease .15s;
    transition: all .3s ease .15s;
}

To show the dropdowns on hover we need to set the opacity to 1 and the visibility and overflow properties to visible.

.nav > li:hover > div {
    opacity: 1;
    visibility: visible;
    overflow: visible;
}

Some Content

As it’s now the menu supports any content in any language (html, php, js, etc.). For this example we will create a columns based layout with some link lists inside. Add the following html code inside of the mega dropdown (<div>).

<div class="nav-column">
    <h3>Home</h3>
    <ul>
        <li><a href="#">Pampers Diapers</a></li>
        <li><a href="#">Huggies Diapers</a></li>
        <li><a href="#">Seventh Generation</a></li>
        <li><a href="#">Diapers</a></li>
        <li><a href="#">Derbies</a></li>
        <li><a href="#">Driving shoes</a></li>
        <li><a href="#">Espadrilles</a></li>
        <li><a href="#">Loafers</a></li>
    </ul>
</div>

<div class="nav-column">
    <h3>Home</h3>
    <ul>
        <li><a href="#">Driving shoes</a></li>
        <li><a href="#">Espadrilles</a></li>
        <li><a href="#">Loafers</a></li>
    </ul>

    <h3>Home</h3>
    <ul>
        <li><a href="#">Driving shoes</a></li>
        <li><a href="#">Espadrilles</a></li>
        <li><a href="#">Loafers</a></li>
    </ul>
</div>

<div class="nav-column">
    <h3>Home</h3>
    <ul>
        <li><a href="#">Pampers Diapers</a></li>
        <li><a href="#">Huggies Diapers</a></li>
        <li><a href="#">Seventh Generation</a></li>
        <li><a href="#">Diapers</a></li>
        <li><a href="#">Derbies</a></li>
        <li><a href="#">Driving shoes</a></li>
        <li><a href="#">Espadrilles</a></li>
        <li><a href="#">Loafers</a></li>
    </ul>
</div>

<div class="nav-column">
    <h3 class="orange">Related Categories</h3>
    <ul>
        <li><a href="#">Pampers Diapers</a></li>
        <li><a href="#">Huggies Diapers</a></li>
        <li><a href="#">Diapers</a></li>
    </ul>

    <h3 class="orange">Brands</h3>
    <ul>
        <li><a href="#">Driving shoes</a></li>
        <li><a href="#">Espadrilles</a></li>
    </ul>
</div>

Then we will add some basic styles for this content. We’ll set the width of each column to be 20%, the padding 2.5% and float the columns to the left. To finish we will add some typography styles for the heading and links.

.nav .nav-column {
    float: left;
    width: 20%;
    padding: 2.5%;
}

.nav .nav-column h3 {
    margin: 20px 0 10px 0;
    line-height: 18px;

    font-family: Helvetica, Arial, sans-serif;
    font-weight: bold;
    font-size: 14px;
    color: #372f2b;
    text-transform: uppercase;
}

.nav .nav-column h3.orange { color: #ff722b; }

.nav .nav-column li a {
    display: block;
    line-height: 26px;

    font-family: Helvetica, Arial, sans-serif;
    font-weight: bold;
    font-size: 13px;
    color: #888888;
}

.nav .nav-column li a:hover { color: #666666; }

Preview
Preview

Download Files

Subscribe to Unlock

Subscribe to our newsletter to get access to this content. Your email will not be sold/rented. Unsubscribe at any time.
- required fields

Enter the e-mail, which was subscribed

After that, the content becomes available again!
- fields are mandatory

On your email was sent a letter

Simply click on the link in the email and you will get access to the hidden content!

There is no information about this email in our database. Please subscribe by clicking on button below.

Your e-mail is not in our database. Subscribe by clicking the button below
I'm already a subscriber

Valeriu is a Web Designer & Front-End Developer currently living in Lisbon, Portugal. He creates some cool stuff using CSS3 and HTML5. You can follow him on @vtimbuc, Google+ or visit his web site at vtimbuc.net.

Newsletter

35 Comments
  1. André Jan 28, 3:11 pm

    Thanks! It will help me a lot!

    Reply
    +11
  2. Alex Jan 28, 3:51 pm

    Don’t work with iOS )

    Reply
    -1
    • Adrian Jan 28, 4:31 pm

      We will check, and we will come back with changes.

      Reply
      +2
    • Valeriu Jan 28, 5:12 pm

      This menu will work in all major browsers including IE8. For touch devices, like iPhone, iPad, etc, you may need to create a simple jQuery script that will make the menu work with the click event instead of hover.

      Reply
      +4
  3. Maxi Jan 28, 4:54 pm

    Nice article :)
    Could you please tell something about browser compatibility?

    Reply
    +6
  4. Harish Jan 28, 6:58 pm

    Thanks Valeriu. Going to use it for a project now.

    Reply
    +2
  5. Rawaf Jan 28, 7:07 pm

    Thank you, It’s perfect for me .. I’m going to use it in my next blog theme :)

    Reply
    +4
  6. Tony Lewis Jan 28, 9:35 pm

    Thanks for the great tutorial.

    Reply
    +3
  7. Yozz Jan 28, 10:53 pm

    How to conect/combine this menu with superfish menu from thematic theme framework ?

    Reply
    +1
  8. Valeriu Jan 28, 11:20 pm

    Thanks guys! I’m glad this tutorial will be useful :)

    Reply
    0
  9. Chris Anderson Jan 29, 1:40 am

    Thanks for this, but a responsive version would be great to see though.

    Reply
    +3
  10. noob Jan 29, 6:27 am

    Hi all, Can this code work on joomla 2.5?
    how to figure out to make this work on joomla 2.5
    thanks.

    Reply
    +2
  11. Chirag Jan 29, 9:55 am

    Thanks for the great tutorial.!!!

    Reply
    +2
  12. gdj Jan 30, 10:58 pm

    I’ve used a couple of these tehcniques, very nice.

    Reply
    +2
  13. The Button Jan 31, 1:11 am

    Very nice tutorial. I would be a nice addition to add scroll stickiness to this tutorial.

    Reply
    -1
  14. Pitou Jan 31, 5:41 pm

    Very nice job, it’s helpful. :)

    Reply
    -2
  15. Noob Feb 5, 6:10 am

    yuhuuuuuiiiiii…

    anyone can tell me how to make this work on joomla 2.5.
    Im new in joomla.

    Reply
    +1
  16. oluwaseun Feb 5, 3:48 pm

    This is really cool. Thanks.

    Reply
    +3
  17. Mitul Patel Mar 13, 10:27 am

    Impressive mega menu tutorial. Learn a lot. Appreciated these blog post.

    Reply
    +2
  18. Jolynn Y Mar 15, 11:47 am

    Excellent menu, just one thing many of us want to be able to create these menus and unordered list at will and make them display right.

    All the rounded corners and the gradients are wonderful, but I think many of us need to create one in a bare bones form, and go back and do the window dressing. By this I mean just the framework of it at first then we can go back in and add the color, the rounded corners, the gradients, and the images.

    Many of us are working on de-cluttering our brains of information that isn’t working for other projects.

    Have you seen that Mega Menu at http://www.Lynda.com where it lets you click on a submenu with letters like in a file index in the software area. Would love to be able to figure that one out. Tried studying their code and it is still a “mind boggling thing to look at”.

    Reply
    -2
  19. sriram May 28, 6:06 am

    Hidden due to low comment rating. Click here to see.

    Reply
    -5
  20. viki53 Jul 31, 8:43 pm

    Not usable with keyboard : no effect at all, except search input.
    Didn’t test with touch device, but I’m afraid it won’t work so well, am I right?

    Reply
    0
    • viki53 Jul 31, 8:47 pm

      If you want to make the keyboard work, just play with :focus state and tabindex=”0″ attribute.
      Should work if it is done right (didn’t try it on, it’s up to you).
      May be worth adding it to the tutorial, though…

      Reply
      0
      • Ebug Aug 15, 8:57 pm

        Useful! I found this tutorial of great help. Pity about the IOS compatibility problems but hopefully I can resolve these fairly easily. I especially like the slide out search box.

        Reply
        0
  21. nirdesh1988 Aug 6, 11:34 am

    This was really and it help me a lot for my project. Thanks very much for such great things

    Reply
    +1
  22. Karin Aug 7, 8:53 am

    This has been the most helpful site I have found on this subject.
    I have one question though. I have been trying to add in an image to show in the columns, but all I get is the red X. Do you have any advise on how I can get an image to show. Thanks again.

    Reply
    +1
  23. Jeremy Oct 8, 10:19 am

    Great menu, but it’s now broken in Chrome 30.0.1599.69 (Windows/OSX) – randomly, it sometimes works 2-3 minutes after page load.

    Reply
    +3
  24. Dominic Oct 13, 2:13 pm

    For iOS-Support add the following jQuery script:

    $(document).ready(function() {
    $(“.nav li:has(ul)”).hover(function(){
    $(this).find(“ul”).slideDown();
    }, function(){
    $(this).find(“ul”).hide();
    });
    });

    And remove the following from CSS “.nav > li > div”:
    -webkit-transition: all .3s ease .15s;
    -moz-transition: all .3s ease .15s;
    -o-transition: all .3s ease .15s;
    -ms-transition: all .3s ease .15s;
    transition: all .3s ease .15s;

    Reply
    +4
  25. Matt Oct 18, 6:14 pm

    Dominic you are a legend!! I had a different pure css drop down menu I just could not get to work on iPhones & was just about to remove it and start all over again. Your advice to remove the transitions fixed it! Been looking for a fix for this for two weeks!!

    Reply
    +2
  26. Olalkika Feb 11, 9:48 am

    it doesn’t work in chrome, only in safari. Please tell me how can i improve this.

    Reply
    0
  27. Michael Feb 21, 1:15 am

    How to make this work on IOS devices ? whats exactly need to be include ?

    Reply
    0
  28. Nicky Jul 3, 7:11 am

    How to make menu content’s width full screen?

    Reply
    0

Leave a Reply

*
* Minimum length: 20 characters