Demo
Screenshot
Add it in your blog
Using the One-Click Install
or Directly add the Code
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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgowZcaepzYZLNUQsszX1_eA7bikfmMV7ys_CexTH6HZGuyCeMfUJq-Ju43KXRJa1_bOLeRAc6M7OBQi6wKV1smz3Ghi1dovbibXcjb0rqx4bJihP1nFrM-m0743esHA_aMFrGx02TxAgb/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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEja0OYm0eGLIusrjp_-OpnUFca9uiKaZypkecPst1DpSD_ug8rH0k1N-BqXSgtBpXVdQNr2XYjzOKVkiFWPessVCux6vSCMk_FtTdmfcOpX5B-uoifdUg-SC1DVfMKEdK3sdt7tA54Brf14/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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEif4VuhBax2y7_raf7fAhyphenhyphenadxNtaPbedJoRLWpxbG18LleSK_pycIXAk_fB4PKbSox-upZC_HYS6nr1PlvmDu-FFOcpsQEe_nW2lnJ0FTiIvRrtb_Cy5ly1uGxNrCXNjzz8mEmevj8jIGq6/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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEif4VuhBax2y7_raf7fAhyphenhyphenadxNtaPbedJoRLWpxbG18LleSK_pycIXAk_fB4PKbSox-upZC_HYS6nr1PlvmDu-FFOcpsQEe_nW2lnJ0FTiIvRrtb_Cy5ly1uGxNrCXNjzz8mEmevj8jIGq6/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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEja0OYm0eGLIusrjp_-OpnUFca9uiKaZypkecPst1DpSD_ug8rH0k1N-BqXSgtBpXVdQNr2XYjzOKVkiFWPessVCux6vSCMk_FtTdmfcOpX5B-uoifdUg-SC1DVfMKEdK3sdt7tA54Brf14/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("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzNoVfSKrUJtYiGuBhAtCMeghJ1CbqFbnG7rA3fpPORYWnZJc9MVUfNuaMVe8r3ITztJ1qLyK8X8UbOGJ1YWHMvw6SyHxTKCwE3YfkM-x2UUOy52ZBgGW4KxV6FSekJ2d6pXfYfv08G4s-/s1600/drop.png") no-repeat right 8px;
}
#menu li:hover .drop {
background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzNoVfSKrUJtYiGuBhAtCMeghJ1CbqFbnG7rA3fpPORYWnZJc9MVUfNuaMVe8r3ITztJ1qLyK8X8UbOGJ1YWHMvw6SyHxTKCwE3YfkM-x2UUOy52ZBgGW4KxV6FSekJ2d6pXfYfv08G4s-/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.
Find me on
Thank you so much, I will try it and let you know. :)
Plz write an article about simple drop down menu for blogger...........
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
Hope i get for wordpress
anything similar for wordpress..
A premium WordPress plugin for this is available here at CodeCanyon
A WordPress plugin for this is available here in 9 different styles CodeCanyon
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 .
What exact problem are you facing with the Read More , can you explain a bit more so that I can help you
good job
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
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!
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
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!!
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..
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.
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
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.
@Vineet Singh: Get a life.
Sorry for inconvenience and misunderstandings.
and to make u go under trouble.
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
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
This is cool, I am adding this on my blog.
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
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 ?
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
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.....
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
verry nice the tutorial bro...
This Is Amazing Tutorial Bro....
Keep Sharing and You Are Awesome...:)
Thx a Lot..
Pгetty nice post. I just stumbled upon your ѡeblog and wanted to say that I have tгuly enjoyed browsing your blog posts. After all I'll be subscгibing to your feed and I hope you write again very soon!