CSS Mega Drop Down Menu for Blogger

css mega drop down menu
A CSS powered Drop Down Menu for Blogger. Mega menu's are being used extensively these days and are really useful for displaying a huge amount of content without cluttering your layout.  The real credit for this menu goes to Guillaume Marty (You can check out his Portfolio and the Commercial version of this menu ). I have just fixed some CSS related conflicts that were happening due to the default Stylesheet that is included by Blogger. Enjoy !


Demo

Screenshot

menu screenshot


Add it in your blog

Using the One-Click Install


or Directly add the Code

layout blogger dashboard

Go to Layout and Add a HTML/JavaScript widget in the Cross Column Region . Paste the code from below in the gadget

Learn how to copy this code in one-click in FAQ

<div id="menu">
<li><a href="#" class="drop">Home</a><!-- Begin Home Item -->
<div class="dropdown_2columns"><!-- Begin 2 columns container -->
<div class="col_2">
<h2>Welcome !</h2>
</div>
<div class="col_2">
<p>Hi and welcome here ! This is a showcase of the possibilities of this awesome Mega Drop Down Menu.</p>             
<p>This item comes with a large range of prepared typographic stylings such as headings, lists, etc.</p>             
</div>
<div class="col_2">
<h2>Cross Browser Support</h2>
</div>
<div class="col_1">
<img src="http://1.bp.blogspot.com/-ghzmqWV-JVc/T_sb6dIHydI/AAAAAAAAGGI/KVKV6tgO-fM/s1600/browsers.png" width="125" height="48" alt="" />
</div>
<div class="col_1">
<p>This mega menu has been tested in all major browsers.</p>
</div>
</div><!-- End 2 columns container -->
</li><!-- End Home Item -->
<li><a href="#" class="drop">5 Columns</a><!-- Begin 5 columns Item -->
<div class="dropdown_5columns"><!-- Begin 5 columns container -->
<div class="col_5">
<h2>This is an example of a large container with 5 columns</h2>
</div>
<div class="col_1">
<p class="black_box">This is a dark grey box text. Fusce in metus at enim porta lacinia vitae a arcu. Sed sed lacus nulla mollis porta quis.</p>
</div>
<div class="col_1">
<p>Phasellus vitae sapien ac leo mollis porta quis sit amet nisi. Mauris hendrerit, metus cursus accumsan tincidunt.</p>
</div>
<div class="col_1">
<p class="italic">This is a sample of an italic text. Consequat scelerisque. Fusce sed lectus at arcu mollis accumsan at nec nisi porta quis sit amet.</p>
</div>
<div class="col_1">
<p>Curabitur euismod gravida ante nec commodo. Nunc dolor nulla, semper in ultricies vitae, vulputate porttitor neque.</p>
</div>
<div class="col_1">
<p class="strong">This is a sample of a bold text. Aliquam sodales nisi nec felis hendrerit ac eleifend lectus feugiat scelerisque.</p>
</div>
<div class="col_5">
<h2>Here is some content with side images</h2>
</div>
<div class="col_3">
<img src="http://2.bp.blogspot.com/-uii0RgXpijI/T_sb5DJGWaI/AAAAAAAAGF4/5hrytF6f_AE/s1600/01.jpg" width="70" height="70" class="img_left imgshadow" alt="" />
<p>Maecenas eget eros lorem, nec pellentesque lacus. Aenean dui orci, rhoncus sit amet tristique eu, tristique sed odio. Praesent ut interdum elit. Sed in sem mauris. Aenean a commodo mi. Praesent augue lacus.<a href="#">Read more...</a></p>
<img src="http://3.bp.blogspot.com/-1dqOjQaLfS0/T_sb5xttWVI/AAAAAAAAGGA/r7OnID4c4BM/s1600/02.jpg" width="70" height="70" class="img_left imgshadow" alt="" />
<p>Aliquam elementum felis quis felis consequat scelerisque. Fusce sed lectus at arcu mollis accumsan at nec nisi. Aliquam pretium mollis fringilla. Nunc in leo urna, eget varius metus. Aliquam sodales nisi.<a href="#">Read more...</a></p>
</div>
<div class="col_2">
<p class="black_box">This is a black box, you can use it to highligh some content. Sed sed lacus nulla, et lacinia risus. Phasellus vitae sapien ac leo mollis porta quis sit amet nisi. Mauris hendrerit, metus cursus accumsan tincidunt.Quisque vestibulum nisi non nunc blandit placerat. Mauris facilisis, risus ut lobortis posuere, diam lacus congue lorem, ut condimentum ligula est vel orci. Donec interdum lacus at velit varius gravida. Nulla ipsum risus.</p>
</div>
</div><!-- End 5 columns container -->
</li><!-- End 5 columns Item -->
<li><a href="#" class="drop">4 Columns</a><!-- Begin 4 columns Item -->
<div class="dropdown_4columns"><!-- Begin 4 columns container -->
<div class="col_4">
<h2>This is a heading title</h2>
</div>
<div class="col_1">
<h3>Some Links</h3>
<ul>
<li><a href="#">ThemeForest</a></li>
<li><a href="#">GraphicRiver</a></li>
<li><a href="#">ActiveDen</a></li>
<li><a href="#">VideoHive</a></li>
<li><a href="#">3DOcean</a></li>
</ul>   
</div>
<div class="col_1">
<h3>Useful Links</h3>
<ul>
<li><a href="#">NetTuts</a></li>
<li><a href="#">VectorTuts</a></li>
<li><a href="#">PsdTuts</a></li>
<li><a href="#">PhotoTuts</a></li>
<li><a href="#">ActiveTuts</a></li>
</ul>   
</div>
<div class="col_1">
<h3>Other Stuff</h3>
<ul>
<li><a href="#">FreelanceSwitch</a></li>
<li><a href="#">Creattica</a></li>
<li><a href="#">WorkAwesome</a></li>
<li><a href="#">Mac Apps</a></li>
<li><a href="#">Web Apps</a></li>
</ul>   
</div>
<div class="col_1">
<h3>Misc</h3>
<ul>
<li><a href="#">Design</a></li>
<li><a href="#">Logo</a></li>
<li><a href="#">Flash</a></li>
<li><a href="#">Illustration</a></li>
<li><a href="#">More...</a></li>
</ul>   
</div>
</div><!-- End 4 columns container -->
</li><!-- End 4 columns Item -->
<li class="menu_right"><a href="#" class="drop">1 Column</a>
<div class="dropdown_1column align_right">
<div class="col_1">
<ul class="simple">
<li><a href="#">FreelanceSwitch</a></li>
<li><a href="#">Creattica</a></li>
<li><a href="#">WorkAwesome</a></li>
<li><a href="#">Mac Apps</a></li>
<li><a href="#">Web Apps</a></li>
<li><a href="#">NetTuts</a></li>
<li><a href="#">VectorTuts</a></li>
<li><a href="#">PsdTuts</a></li>
<li><a href="#">PhotoTuts</a></li>
<li><a href="#">ActiveTuts</a></li>
<li><a href="#">Design</a></li>
<li><a href="#">Logo</a></li>
<li><a href="#">Flash</a></li>
<li><a href="#">Illustration</a></li>
<li><a href="#">More...</a></li>
</ul>   
</div>
</div>
</li>
<li class="menu_right"><a href="#" class="drop">3 columns</a><!-- Begin 3 columns Item -->
<div class="dropdown_3columns align_right"><!-- Begin 3 columns container -->
<div class="col_3">
<h2>Lists in Boxes</h2>
</div>
<div class="col_1">
<ul class="greybox">
<li><a href="#">FreelanceSwitch</a></li>
<li><a href="#">Creattica</a></li>
<li><a href="#">WorkAwesome</a></li>
<li><a href="#">Mac Apps</a></li>
<li><a href="#">Web Apps</a></li>
</ul>   
</div>
<div class="col_1">
<ul class="greybox">
<li><a href="#">ThemeForest</a></li>
<li><a href="#">GraphicRiver</a></li>
<li><a href="#">ActiveDen</a></li>
<li><a href="#">VideoHive</a></li>
<li><a href="#">3DOcean</a></li>
</ul>   
</div>
<div class="col_1">
<ul class="greybox">
<li><a href="#">Design</a></li>
<li><a href="#">Logo</a></li>
<li><a href="#">Flash</a></li>
<li><a href="#">Illustration</a></li>
<li><a href="#">More...</a></li>
</ul>   
</div>
<div class="col_3">
<h2>Here are some image examples</h2>
</div>
<div class="col_3">
<img src="http://3.bp.blogspot.com/-1dqOjQaLfS0/T_sb5xttWVI/AAAAAAAAGGA/r7OnID4c4BM/s1600/02.jpg" width="70" height="70" class="img_left imgshadow" alt="" />
<p>Maecenas eget eros lorem, nec pellentesque lacus. Aenean dui orci, rhoncus sit amet tristique eu, tristique sed odio. Praesent ut interdum elit. Maecenas imperdiet, nibh vitae rutrum vulputate, lorem sem condimentum.<a href="#">Read more...</a></p>
<img src="http://2.bp.blogspot.com/-uii0RgXpijI/T_sb5DJGWaI/AAAAAAAAGF4/5hrytF6f_AE/s1600/01.jpg" width="70" height="70" class="img_left imgshadow" alt="" />
<p>Aliquam elementum felis quis felis consequat scelerisque. Fusce sed lectus at arcu mollis accumsan at nec nisi. Aliquam pretium mollis fringilla. Vestibulum tempor facilisis malesuada. <a href="#">Read more...</a></p>
</div>
</div><!-- End 3 columns container -->
</li><!-- End 3 columns Item -->
</div>

<style type="text/css">
body, ul, li {
 font-size:14px;
 font-family:Arial, Helvetica, sans-serif;
 line-height:21px;
 text-align:left;
}

/* Navigation Bar */

#menu {
 list-style:none;
 width:940px;
 margin:30px auto 0px auto;
 height:43px;
 padding:0px 20px 0px 20px;

 /* Rounded Corners */

 -moz-border-radius: 10px;
 -webkit-border-radius: 10px;
 border-radius: 10px;

 /* Background color and gradients */

 background: #014464;
 background: -moz-linear-gradient(top, #0272a7, #013953);
 background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#0272a7), to(#013953));

 /* Borders */

 border: 1px solid #002232;

 -moz-box-shadow:inset 0px 0px 1px #edf9ff;
 -webkit-box-shadow:inset 0px 0px 1px #edf9ff;
 box-shadow:inset 0px 0px 1px #edf9ff;
}

#menu li {
 float:left;
 text-align:center;
 position:relative;
 padding: 4px 10px 4px 10px;
 margin-right:30px;
 margin-top:7px;
 border:none;
}

#menu li:hover {
 border: 1px solid #777777;
 padding: 4px 9px 4px 9px;

 /* Background color and gradients */

 background: #F4F4F4;
 background: -moz-linear-gradient(top, #F4F4F4, #EEEEEE);
 background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#F4F4F4), to(#EEEEEE));

 /* Rounded corners */

 -moz-border-radius: 5px 5px 0px 0px;
 -webkit-border-radius: 5px 5px 0px 0px;
 border-radius: 5px 5px 0px 0px;
}

#menu li a {
 font-family:Arial, Helvetica, sans-serif;
 font-size:14px;
 color: #EEEEEE;
 display:block;
 outline:0;
 text-decoration:none;
 text-shadow: 1px 1px 1px #000;
}

#menu li:hover a {
 color:#161616;
 text-shadow: 1px 1px 1px #FFFFFF;
}
#menu li .drop {
 padding-right:21px;
 background:url("http://2.bp.blogspot.com/-g423ObKCf1E/T_sb62gWAhI/AAAAAAAAGGQ/Hf3m6ubCTmY/s1600/drop.png") no-repeat right 8px;
}
#menu li:hover .drop {
 background:url("http://2.bp.blogspot.com/-g423ObKCf1E/T_sb62gWAhI/AAAAAAAAGGQ/Hf3m6ubCTmY/s1600/drop.png") no-repeat right 7px;
}

/* Drop Down */

.dropdown_1column,
.dropdown_2columns,
.dropdown_3columns,
.dropdown_4columns,
.dropdown_5columns {
 margin:4px auto;
 float:left;
 position:absolute !important;
 left:-999em; /* Hides the drop down */
 text-align:left;
 padding:10px 5px 10px 5px;
 border:1px solid #777777;
 border-top:none;

 /* Gradient background */
 background:#F4F4F4;
 background: -moz-linear-gradient(top, #EEEEEE, #BBBBBB);
 background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#EEEEEE), to(#BBBBBB));

 /* Rounded Corners */
 -moz-border-radius: 0px 5px 5px 5px;
 -webkit-border-radius: 0px 5px 5px 5px;
 border-radius: 0px 5px 5px 5px;
}

.dropdown_1column {width: 140px;}
.dropdown_2columns {width: 280px;}
.dropdown_3columns {width: 420px;}
.dropdown_4columns {width: 560px;}
.dropdown_5columns {width: 700px;}

#menu li:hover .dropdown_1column,
#menu li:hover .dropdown_2columns,
#menu li:hover .dropdown_3columns,
#menu li:hover .dropdown_4columns,
#menu li:hover .dropdown_5columns {
 left:-1px ;
z-index:444 !important;
    top:auto;
}

/* Columns */

.col_1,
.col_2,
.col_3,
.col_4,
.col_5 {
 display:inline;
 float: left;
 position: relative;
 margin-left: 5px;
 margin-right: 5px;
}
.col_1 {width:130px;}
.col_2 {width:270px;}
.col_3 {width:410px;}
.col_4 {width:550px;}
.col_5 {width:690px;}

/* Right alignment */

#menu .menu_right {
 float:right !important;
 margin-right:0px;
}
#menu li .align_right {
 /* Rounded Corners */
 -moz-border-radius: 5px 0px 5px 5px;
    -webkit-border-radius: 5px 0px 5px 5px;
    border-radius: 5px 0px 5px 5px;
}
#menu li:hover .align_right {
 left:auto;
 right:-1px;
 top:auto;
}

/* Drop Down Content Stylings */

#menu p, #menu h2, #menu h3, #menu div li {
 font-family:Arial, Helvetica, sans-serif;
 line-height:21px;
 font-size:12px;
 text-align:left;
 text-shadow: 1px 1px 1px #FFFFFF;
}
#menu h2 {
 font-size:21px;
 font-weight:400;
 letter-spacing:-1px;
 margin:7px 0 14px 0;
 padding-bottom:14px;
 border-bottom:1px solid #666666;
}
#menu h3 {
 font-size:14px;
 margin:7px 0 14px 0;
 padding-bottom:7px;
 border-bottom:1px solid #888888;
}
#menu p {
 line-height:18px;
 margin:0 0 10px 0;
}

#menu li:hover div a {
 font-size:12px;
 color:#015b86;
}
#menu li:hover div a:hover {
 color:#029feb;
}
.strong {
 font-weight:bold;
}
.italic {
 font-style:italic;
}
.imgshadow {
 background:#FFFFFF;
 padding:4px;
 border:1px solid #777777;
 margin-top:5px;
 -moz-box-shadow:0px 0px 5px #666666;
 -webkit-box-shadow:0px 0px 5px #666666;
 box-shadow:0px 0px 5px #666666;
}
.img_left { /* Image sticks to the left */
 width:auto;
 float:left;
 margin:5px 15px 5px 5px;
}
#menu li .black_box {
 background-color:#333333;
 color: #eeeeee;
 text-shadow: 1px 1px 1px #000;
 padding:4px 6px 4px 6px;

 /* Rounded Corners */
 -moz-border-radius: 5px;
 -webkit-border-radius: 5px;
 border-radius: 5px;

 /* Shadow */
 -webkit-box-shadow:inset 0 0 3px #000000;
 -moz-box-shadow:inset 0 0 3px #000000;
 box-shadow:inset 0 0 3px #000000;
}
#menu li ul {
 list-style:none;
 padding:0;
 margin:0 0 12px 0;
}
#menu li ul li {
 font-size:12px;
 line-height:24px;
 position:relative;
 text-shadow: 1px 1px 1px #ffffff;
 padding:0;
 margin:0;
 float:none;
 text-align:left;
 width:130px;
}
#menu li ul li:hover {
 background:none;
 border:none;
 padding:0;
 margin:0;
}
#menu li .greybox li {
 background:#F4F4F4;
 border:1px solid #bbbbbb;
 margin:0px 0px 4px 0px;
 padding:4px 6px 4px 6px;
 width:116px;

 /* Rounded Corners */
 -moz-border-radius: 5px;
 -webkit-border-radius: 5px;
 border-radius: 5px;
}
#menu li .greybox li:hover {
 background:#ffffff;
 border:1px solid #aaaaaa;
 padding:4px 6px 4px 6px;
 margin:0px 0px 4px 0px;
}

.tabs-inner .widget li a {
padding: 1px ;
display:block !important;
border: 1px solid  transparent !important ;
}


</style>
<a href="http://www.stylifyyourblog.com" title="Stylify Your Blog" ><img src="http://img1.blogblog.com/img/blank.gif" /></a>


Feel free to ask if you face any problems.


Written by Prayag Verma


A blogger and Web Developer currently in college learning about computers. A CSS Lover , Blogger Template Designer and Music Addict ! Get more from Prayag on and Twitter




Email Newsletter

Like what you read here in this post ?
Get new posts delivered straight to your inbox



Related Articles


Post a Comment

Thank you so much, I will try it and let you know. :)

Neeraj said...

Plz write an article about simple drop down menu for blogger...........

Prayag Verma said...

Will write a tutorial for a simple Drop down menu soon

Nice, i will try this :D

Its working superbly.

Can you come up with a customized version of this, I know you can make it look awesometic :) :D

Nice tutz pal,,,

hey, i just try your template Directus, and i have problem with read more feature. How to fix it?
Thanks

deepak said...

Hope i get for wordpress

anything similar for wordpress..

Prayag Verma said...

A premium WordPress plugin for this is available here at CodeCanyon

Prayag Verma said...

A WordPress plugin for this is available here in 9 different styles CodeCanyon

Prayag Verma said...

The author of this Mega Menu released a premium version of this with a lots of extra features like 9 different styles ,Responsive design ,etc . You can buy it on CodeCanyon .

Prayag Verma said...

What exact problem are you facing with the Read More , can you explain a bit more so that I can help you

good job

Nick Strauss said...

THANK YOU SO MUCH!
I'm using this in my website, you've made my life easier!
Please visit and tell me how's it looking with your menu: http://omgayush.blogspot.com/ :-) Thanks!

the problem was solved,,,

hey, do you know how to reduce the error threaded comment when validated at w3.org?

Cuz, I'm trying to use html5

Thanks

Prayag Verma said...

Nick the menu looks awesome on your blog , but I saw that a horizontal scrollbar appears when the drop down menu opens, to fix that add the following CSS

.dropdown_1column, .dropdown_2columns, .dropdown_3columns, .dropdown_4columns, .dropdown_5columns {overflow-x:hidden;}

Hope it helps

i can't see the links that you put in the demo code...any solution to that?! thanks!

sibin xavier said...

Very lengthy code.I need to add this drop down menu , but i want simple one .If you don't mind visit my blog and suggest a simple drop down menu code.

www.7chip.com

Prayag Verma said...

Mailed you the code for a simpler Drop Down Menu , hope that it helps

The drop down menu is so beautiful...
I like it so much...
But I have a litle problem when add it into my blog.
The position of the drop down menu is not in center...
can you tell me, how to fix it?

How to add it using the edit html in template in blogger

This is gr8 man, thanks a lot!!

Yohan Wadia said...

You have no idea how long it took me to find something soooo cool as this.. I have included this in my blog (yoyoclouds.com).. and to be honest.. its AWESOME !!
Thanks for all the effort !!

Superb bro..Excellent work..you have given me .What I want. your blog is really awesome simple but Fantastic..thanks for the share..

Blog Okulu said...

thank you.I am make game blog.Can you help me seo for my game blog.My game blog is the araba oyunları I want to improve my google word araba oyunları.

It works but does not works as your demo.plz say something. some menu missing in the table. what can i do? plz plz solve this problem as soon as possible.

Nithin said...

Thanks pal its good cinemareports.blogspot.in

how can i create sun menu 2, like this menu (http://playground.emanuelblagonic.com/creating-nested-drop-down-menus/) from this menu plz post another post or give a solution as soon as possible.thank u

Vineet Singh said...

This Content Originally Belongs to ThemeForest And Pixelworkshop and you Are Using This Content against Our TOS You Are Requested To Remove This Content Within 48 Hrs. Or An Appropriate Action May Be Taken Against Your Site For Violating The Law Of Themeforest And Google.
From:- Vineet Kumar (Member Of ThemeForest And Pixelworkshop.fr)

@Vineet Singh I'm the only member of Pixelworkshop and you can contact me here if you need : http://codecanyon.net/user/Pixelworkshop. As a side note, this content comes from the Nettuts tutorial as specified in the intro text, not from my "commercial" versions of this menu.

SSBCrack said...

@Vineet Singh: Get a life.

Vineet Singh said...

Sorry for inconvenience and misunderstandings.
and to make u go under trouble.

ibnu said...

Interesting css. However you still maintain manually. It is more good if drop down menu can contain automatic recent posts based on labels. Here is the tutorial http://www.threelas.com/2012/09/drop-down-menu-with-recent-posts-based.html and here the demo http://jsfiddle.net/putriarisnawati/4tgkp/light/

I believe with integrating the css of this tutorials with threelas tutorial then awesome drop down menu for blogger will resulted

Nowe Afrika said...

Thanks for the menus and its really easy to add. However, mine is not displaying properly. http://east-operators.blogspot.com/ what could be the problem?

Grate Post Ever Seen

John Xc said...

This is cool, I am adding this on my blog.

MAVERICKC45 said...

dONT WORK
http://raziel2099-imagenes.blogspot.mx/

MAVERICKC45 said...

Sorry this dont Work For Template Fantastico S.A.


Hi, "CSS Mega Drop Down Menu for Blogger" code is working fine Google chore, but this code is not properly working in mozilla, I.E 7.0 and above versions also,
For yours referrence please check this link "http://stylified.blogspot.in/# " in "mozilla, I.E 7.0 and above versions" (we face issue at menu DropDownList) , Can you please give solution to over come this problem

Ary_Putra said...

outstanding. Nice simple way. but one question from me..? if the script does not affect the performance of loading daipada blog.

Thank you for your posts, they are very helpful :)

How to add just one drop down menu like the one named "4 columns" for my labels without adding the whole header; can I just implement some part of the code to the already existing menu code of my template ?

Cyrusholiday said...

I really appreciate this wonderful post that you have provided for us. I assure this would be beneficial for most of the people.
open source developer

Hi Prayag,
i'hv some nice and smotth dropdown menu but the dropdown list is huge and i want some scrollbars in the dropdownlist (like need 8 options and after that scrolling starts with all other options)...see if u can help me out...and do mail if u find anything interseting about this.
Blog: www.wheelsologyindia.blogspot.com

Thanks in advance

thanks your information, It's very helpful for me

you are professional, great thanks

sadman sami said...

Cool tutorial i have found a website with good menu bars and other css designs you may like the designs.

http://freebietemplate.com/css-designs/css-designs.html

have a nice day

Nice post & Beautiful Menu.....

Becky said...

The menu is showing perfectly in chrome, but completely skewed and the drop downs are showing behind my first post on the homepage. Please help! http://www.thetwobiteclub.com

Leony Li said...

verry nice the tutorial bro...

Satria Prime said...

This Is Amazing Tutorial Bro....
Keep Sharing and You Are Awesome...:)
Thx a Lot..