The navigation bar on this page demonstrates a menu that has drop down mega menus.

To avoid accidental opening, clicking is necessary to activate the menu.

You can create and manage mega menus under Appearance > Mega Menus, and assign mega menus to menu items in the WordPress menu editor (Appearance > Menus).

Creating mega menus is rather simple. The only thing that needs attention is the styling. If your site is responsive, mega menus also need to be responsive. In most cases, mega menus require custom CSS media queries and some media queries that are used in your responsive site design need to be overridden in mega menus. The following CSS codes show how to do it.

Menu 1 Mega Menu
Content: 
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
 
[row class="fashion_mega_menu_holder"]
    [col]
        <b>Footwear</b>

        [divider /]

        [list icon="arrow-right-2" icon_size="12px"]
        <ul>
            <li><a href="#">Shoes</a></li>
            <li><a href="#">Skate Shoes</a></li>
            <li><a href="#">Golf Shoes</a></li>
            <li><a href="#">Running Shoes</a></li>
            <li><a href="#">Trainers</a></li>
        </ul>
        [/list]
    [/col]
    [col]
        <b>Clothing</b>

        [divider /]

        [list icon="arrow-right-2" icon_size="12px"]
        <ul>
            <li><a href="#">Jackets</a></li>
            <li><a href="#">T-Shirts</a></li>
            <li><a href="#">Shirts</a></li>
            <li><a href="#">Shorts</a></li>
            <li><a href="#">Jeans</a></li>
        </ul>
        [/list]
    [/col]
[/row]

Custom CSS: 

1.
2.
3.
 
.fashion_mega_menu_holder {
    width: 250px;
}

Menu 2 Mega Menu
Content: 
1.
2.
3.
 
<div class="slider_mega_menu_holder">
    [widget_area name="Mega Slider" /]
</div>

Custom CSS: 

1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
 
.slider_mega_menu_holder {
    width: 760px;
}

.slider_mega_menu_holder .slideshow {
    margin-top: 10px;
}

@media only screen and (max-width: 767px) {
    .slider_mega_menu_holder {
        width: auto;
    }
    .slider_mega_menu_holder .col {
        width: 100%;
    }
}

Menu 3 Mega Menu
Content: 
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
 
<div class="tab_mega_menu_holder">
    [tabset type="vertical" autoplay="true"]
        [tab_labels]
            [tab_label]Recent posts[/tab_label]
            [tab_label]Popular posts[/tab_label]
        [/tab_labels]
        [tab_contents]
            [tab_content][post_list posts_per_page="3" columns_num="3" thumbnail_width="180" /][/tab_content]
            [tab_content][post_list posts_per_page="3" columns_num="3" thumbnail_width="180" order_by="comment_count" /][/tab_content]
        [/tab_contents]
    [/tabset]
</div>

Custom CSS: 

1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
 
.tab_mega_menu_holder {
    width: 750px; 
}
@media only screen and (max-width: 767px) {
    .tab_mega_menu_holder {
        width: 400px;
    }
}
    /* do not allow responsive rules to override col3 width */
#nav .tab_mega_menu_holder .col3 {
    width: 33.33%;
}

.tab_mega_menu_holder {
    padding: 8px; 
    font-size: 13px;
}

Menu 4 Mega Menu
Content: 
1.
2.
3.
 
<div class="contact_mega_menu_holder">
    [widget_area name="Contact" /]
</div>

Custom CSS: 

1.
2.
3.
4.
5.
6.
7.
8.
 
.contact_mega_menu_holder {
    width: 600px;
}
@media only screen and (max-width: 610px) {
    .contact_mega_menu_holder {
        width: 400px;
    }
}