Add Roseic Mega Menu in Blogger
- Login to Blogger > Dashborad
- Click on Drop Down Menu and select Layout
- Add a HTML/JavaScript Gadget
- Paste below code in it.
<style>
/--- Roseic Drop Down Menu By www.widgetgenerators.com ---/
ul.oe_menu {
font-family:Arial, Helvetica, sans-serif;
border:1px solid #fff;
margin:0;
padding:0;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvInLeT4cBIgfxv5x2eY-B6MV-bJHxJUfWSEOTzj1qsOXgdE1r39YrlK97NAP5Rp50uotNNwpEZ-pSt22hGuTu1f395SM1_Mfok4MlGDywmqgMHQTYJdXsdDySGZHLS3czR6sVv08tsr3z/s1600/bg.png) repeat-x;
}
}
.clear {
clear: both;
}
a {
color: #3299bb;
text-decoration: none;
-moz-transition: all 0.2s ease-in-out;
-webkit-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
ul.oe_menu {
list-style:none;
width:960px;
float:left;
clear:both;
margin:0;
padding:0;
position:relative;
top:-5px;
}
ul.oe_menu li {
float:left;
position:relative;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpP-Hndt8s6rRh1Q7Gdz3Rts3zkCc7YHo2hBTBDOE2rSiGfz0Buic8hfnlEFuunsZnEfFvhw5Lpjx1QP15F83hJ1kdrz6U54NvX-yKv7r5L3wUaOwFuyNdhFgSJ1qt59Rf_sVo5-bIdhs8/s1600/rosiec-tab.png) no-repeat 100% 100%;
margin:0;
padding:0;
}
ul.oe_menu li a .home {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAVnxnyY6_FSF-315v3FP-EOQyiaZZiGSzgdrV1gzgwJEtrZMoxEYJPfrj6_TQewGfjjMND29ma8gfKXDBALsQDPYruPwKDzSI-IkjMotfNF4ARiNDzQ21AW4ceKy9ug2xyYcncOp8GPCr/s1600/home-icon.png) scroll 20px 0px no-repeat;
width:59px;
margin:0;
padding:10px 0;
*padding:0;
display:block;
float:left;
position:relative;
}
ul.oe_menu li a .home:hover {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAVnxnyY6_FSF-315v3FP-EOQyiaZZiGSzgdrV1gzgwJEtrZMoxEYJPfrj6_TQewGfjjMND29ma8gfKXDBALsQDPYruPwKDzSI-IkjMotfNF4ARiNDzQ21AW4ceKy9ug2xyYcncOp8GPCr/s1600/home-icon.png) scroll 20px -44px no-repeat;
padding:10px 0;
*padding:0;
display:block;
float:left;
position:relative;
}
ul.oe_menu li .no-p-m {
margin:0;
padding:0;
height:41px;
}
ul.oe_menu li .all_categries_link {
color:#006699;
}
ul.oe_menu li .menu {
display:block;
color:#666666;
text-decoration:none;
font-size:15px;
padding:13px 17px;
margin:1px;
display:block;
float:left;
}
ul.oe_menu li .menu:hover, ul.oe_menu li.selected .menu {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVo_wYujRkWYqTbx7NHO3QU1kf6ELFnRGRODRIi7FFG2AU4vf1yBVkx3z4zjI-ptAt2SeegzaHu2UB85mmJ4EAOUnyeUP3PkF0JfFNtk6xRH3flxbSmy_y9F5tOqGqdStrLB9O3p9s2wJN/s1600/bg-tabs.png) bottom repeat-x;
color:#fff;
background-position:-2px 0px;
}
ul.oe_menu div {
position:absolute;
border:1px solid #1b63ab;
top:46px;
*top:44px;
left:1px;
background:#fff;
display:none;
zoom:1;
}
ul.oe_menu div ul.oe_full {
width:100%;
}
li.oe_heading {
color:#333;
font-size:16px;
margin-bottom:10px;
padding-bottom:6px;
border-bottom:1px solid #ddd;
clear:both;
}
span.reference {
position:fixed;
left:0px;
bottom:0px;
width:100%;
font-size:10px;
line-height:20px;
text-align:right;
height:20px;
}
span.reference a {
color:#aaa;
text-transform:uppercase;
text-decoration:none;
margin-right:10px;
}
span.reference a:hover {
color:#ddd;
}
.bg_img img {
width:100%;
position:fixed;
top:0px;
left:0px;
}
ul.oe_menu li div.one-clm {
width:172px;
padding:0 15px 0 0;
}
ul.oe_menu li div.two-clm {
width:370px;
padding:0 15px 0 0;
position:absolute;
}
ul.oe_menu li div.three-clm {
width:555px;
float:left;
padding:0 15px 0 0;
}
ul.oe_menu li div dl {
width:170px;
float:left;
font:Arial, Helvetica, sans-serif;
margin:15px 0 15px 15px;
*margin:0px 0 15px 10px;
*position:relative;
*top:10px;
}
ul.oe_menu li div dl dt {
display:block;
width:92%;
padding:0 0 5px 0;
margin:0 0 5px 0;
border-bottom:1px dashed #f1f1f1;
float:left;
font:bold 14px Arial, Helvetica, sans-serif;
color:#999;
}
ul.oe_menu li div dl dd a {
background:none;
color:#999;
font:12px Arial, Helvetica, sans-serif;
padding:3px 0;
width:92%;
display:block;
}
ul.oe_menu li div dl dd a:hover {
text-decoration:none;
color:#003399;
}
/--- Roseic Drop Down Menu By www.widgetgenerators.com ---/
</style>
<!-- The JavaScript Drop Down Start-->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
var $oe_menu = $('#oe_menu');
var $oe_menu_items = $oe_menu.children('li');
var $oe_overlay = $('#oe_overlay');
$oe_menu_items.bind('mouseenter',function(){
var $this = $(this);
$this.addClass('slided selected');
$this.children('div').css('z-index','9999').stop(true,true).slideDown(200,function(){
$oe_menu_items.not('.slided').children('div').hide();
$this.removeClass('slided');
});
}).bind('mouseleave',function(){
var $this = $(this);
$this.removeClass('selected').children('div').css('z-index','1');
});
$oe_menu.bind('mouseenter',function(){
var $this = $(this);
$oe_overlay.stop(true,true).fadeTo(200, 0.6);
$this.addClass('hovered');
}).bind('mouseleave',function(){
var $this = $(this);
$this.removeClass('hovered');
$oe_overlay.stop(true,true).fadeTo(200, 0);
$oe_menu_items.children('div').hide();
})
});
</script>
<!-- navigation java script ends here -->
<ul id="oe_menu" class="oe_menu" style="position:relative;">
<li><a class="menu" href="http://www.widgetgenerators.com/"><span class="home"></span></a>
</li>
<li><a class="menu" href="#">Blogging</a>
<div class="two-clm">
<dl>
<dt>Category</dt>
<dd><a href="#">Widgets</a></dd>
<dd><a href="#">Tutorials</a></dd>
<dd><a href="#">JavaScript</a></dd>
<dd><a href="#">Generators</a></dd>
<dd><a href="#">CSS Widgets</a></dd>
</dl>
<dl>
<dt>Brands</dt>
<dd><a href="#">Blogger</a></dd>
<dd><a href="#">Wordpress</a></dd>
<dd><a href="#">Tumbler</a></dd>
<dd><a href="#">Joomla</a></dd>
<dd><a href="#">Square Space</a></dd>
<dd><a href="#">LiveJournal</a></dd>
</dl>
</div>
</li>
<li><a class="menu" href="#">Money Online</a>
<div class="one-clm">
<dl>
<dt>Brands</dt>
<dd><a href="#">Adsense</a></dd>
<dd><a href="#">Citika</a></dd>
<dd><a href="#">Ad Brid</a></dd>
<dd><a href="#">Yahoo</a></dd>
<dd><a href="#">Bing</a></dd>
<dd><a href="#">...View More</a></dd>
</dl>
</div>
</li>
<li><a class="menu" href="#">Social Media</a>
<div class="three-clm">
<dl>
<dt>Online Media</dt>
<dd><a href="#">eNews</a></dd>
<dd><a href="#">ePaper</a></dd>
<dd><a href="#">eBusiness</a></dd>
<dd><a href="#">eGold</a></dd>
<dd><a href="#">eSilver</a></dd>
<dd><a href="#">eSports</a></dd>
<dd><a href="#">View More...</a></dd>
</dl>
<dl>
<dt>Multi Media </dt>
<dd><a href="#">TV News</a></dd>
<dd><a href="#">News Paper</a></dd>
<dd><a href="#">TV Anchor</a></dd>
<dd><a href="#">View More...</a></dd>
</dl>
<dl>
<dt>Brands</dt>
<dd><a href="#">Aaj Tak </a></dd>
<dd><a href="#">News 24 </a></dd>
<dd><a href="#">Star News </a></dd>
<dd><a href="#">ABP News </a></dd>
<dd><a href="#">P7 News</a></dd>
<dd><a href="#">Aawaj</a></dd>
<dd><a href="#">...View More</a></dd>
</dl>
</div>
</li>
<li><a class="menu" href="#">Social Sites</a>
<div class="three-clm">
<dl>
<dt>Facebook</dt>
<dd><a href="#">IT</a></dd>
<dd><a href="#">Accounts</a></dd>
<dd><a href="#">Management</a></dd>
<dd><a href="#">Marketing</a></dd>
<dd><a href="#">Softwares</a></dd>
<dd><a href="#">Hardware</a></dd>
<dd><a href="#">View More...</a></dd>
</dl>
<dl>
<dt>Google</dt>
<dd><a href="#">Web</a></dd>
<dd><a href="#">Images</a></dd>
<dd><a href="#">Translate</a></dd>
<dd><a href="#">Google Plus</a></dd>
<dd><a href="#">View More...</a></dd>
</dl>
<dl>
<dt>Twitter</dt>
<dd><a href="#">Follow</a></dd>
<dd><a href="#">Tweet</a></dd>
<dd><a href="#">Share</a></dd>
<dd><a href="#">Retweet</a></dd>
<dd><a href="#">Unfollow</a></dd>
<dd><a href="#">View More...</a></dd>
</dl>
</div>
</li>
<li><a class="menu" href="#">CSS</a>
<div class="one-clm">
<dl>
<dt>CSS Widget</dt>
<dd><a href="#">Codes</a></dd>
<dd><a href="#">Classes</a></dd>
<dd><a href="#">ID</a></dd>
<dd><a href="#">View More...</a></dd>
</dl>
</div>
</li>
<li><a class="menu" href="#">Books</a>
<div class="one-clm">
<dl>
<dt>eBooks</dt>
<dd><a href="#">Adsense Secrets 5 </a></dd>
<dd><a href="#">Let Us C</a></dd>
<dd><a href="#">Fundamentals</a></dd>
<dd><a href="#">JavaScript</a></dd>
<dd><a href="#">Core Java</a></dd>
<dd><a href="#">What is Blogging</a></dd>
<dd><a href="#">View More...</a></dd>
</dl>
</div>
</li>
<li><a class="menu" href="#">Tools</a>
<div class="one-clm">
<dl>
<dt class="oe_heading">Blogging Tools</dt>
<dd><a href="#">HTML Editor</a></dd>
<dd><a href="#">HTML Encoder</a></dd>
<dd><a href="#">View More...</a></dd>
</dl>
</div>
</li>
<!-- <li><a class="menu" href="http://www.widgetgenerators.com">Gifts</a>
<div class="one-clm">
<dl>
<dt class="oe_heading">Gifts</dt>
<dd><a href="#">Fun Gifts</a></dd>
<dd><a href="#">USB Gadgets</a></dd>
<dd><a href="#">Clocks</a></dd>
<dd><a href="#">View More...</a></dd>
</dl>
</div>
</li> -->
<li><a class="menu" href="#">Help</a>
<div class="one-clm">
<dl>
<dt class="oe_heading">Offers</dt>
<dd><a href="#">Combo</a></dd>
<dd><a href="#">View More...</a></dd>
</dl>
</div>
</li>
</ul>
- Finally Save Your Widget and You are done.
Make Changes....!
- Replace it # with your link.
- Replace this Orange color with your main text.
- Replace this Red color with your sub heading text (as you can see in Live Demo)
- Replace this Blue color with your drop down sub parts (as you can see in Live Demo)
