How To Add Stylish Drop Down Mega Menu Css3 Navigation Menu Bar For Blogger
1. Log in to blogger account2. Now select Template
3. Now Click EDIT HTML Button
4. Find this tag by using Ctrl+F ]]></b:skin>
5. Paste below code Before ]]></b:skin>
/* CSS Code menustarts here bloggersstand.blogspot.com*/6. Go to blogger and click Layout
ul.bloggersstand {
position: relative;
}
ul.bloggersstand li {
list-style:none;
font-weight: bold;
float: left;
zoom: 1;
background: #0852F0 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgahjjNLsW9qw9Mimxy3tKz8ne4x8PTsTCoCFVruDv3fENuaDI61HqA6QnY8rTc4-3b6_GH7R8bMI5O2_Ep-uNFQ_VqwI0pMLyA74LchADPa-PTmsU_OgZILghNZ5owllhyphenhyphenyxUsVnqE4Ars/s1600/overlay2.png) repeat-x top left;
border-radius: 5px;
border-radius: 5px;
margin:1px;
text-shadow: 0 2px 1px rgba(0,0,0,0.2);
}
ul.bloggersstand a:hover {
color: #000;
}
ul.bloggersstand a:active {
color: #ffa500;
}
ul.bloggersstand li a {
display: block;
padding: 4px 8px;
color: #fff;
text-shadow: 0 2px 1px rgba(0,0,0,0.2);
}
ul.bloggersstand li:last-child a {
border-right: none;
}
/* Doesn't work in IE */
ul.bloggersstand li.hover, ul.bloggersstand li:hover {
background: #0070C0;
color: black;
position: relative;
color:#fff;
}
ul.bloggersstand li.hover a {
color: #fff;
font-weight:bold;
}
/*
LEVEL TWO
*/
ul.bloggersstand ul {
width: 220px;
visibility: hidden;
position: absolute;
top: 100%;
left: 0;
}
ul.bloggersstand ul li {
font-weight: normal;
background: #25C0F1 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgahjjNLsW9qw9Mimxy3tKz8ne4x8PTsTCoCFVruDv3fENuaDI61HqA6QnY8rTc4-3b6_GH7R8bMI5O2_Ep-uNFQ_VqwI0pMLyA74LchADPa-PTmsU_OgZILghNZ5owllhyphenhyphenyxUsVnqE4Ars/s1600/overlay2.png) repeat-x top left;
color: #000;
float: none;
}
/* IE 6 & 7 Needs Inline Block */
ul.bloggersstand ul li a {
border-right: none;
width: 100%;
display: inline-block;
}
/*
LEVEL THREE
*/
ul.bloggersstand ul ul {
left:180px;
top: 0;
}
ul.bloggersstand li:hover > ul {
visibility: visible;
}
7. Click Add Gadget and select HTML/Javascript
8. Paste below code
<ul class="bloggersstand">*Change All # With Your Links.
<li><a href="#">For Facilities</a>
<ul class="sub_menu">
<li><a href="#">Artificial Turf</a></li>
<li>
<a href="#">Batting Cages</a>
<ul>
<li><a href="#">Indoor</a></li>
<li><a href="#">Outdoor</a></li>
</ul>
</li>
<li><a href="#">Benches & Bleachers</a></li>
<li><a href="#">Communication Devices</a></li>
<li><a href="#">Dugouts</a></li>
<li><a href="#">Fencing & Windscreen</a></li>
<li><a href="#">Floor Protectors</a></li>
<li><a href="#">Foul Poles</a></li>
<li><a href="#">Netting</a></li>
<li><a href="#">Outdoor Furniture</a></li>
<li><a href="#">Outdoor Signs</a></li>
<li><a href="#">Padding</a></li>
<li><a href="#">Scoreboards</a></li>
<li><a href="#">Shade Structures</a></li>
<li><a href="#"> - VIEW ALL - </a></li>
</ul>
</li>
<li><a href="#">Field Maintenance</a>
<ul class="sub_menu">
<li><a href="#">All-in-One Team Cart</a></li>
<li><a href="#">Air & Electrical Reels</a></li>
<li><a href="#">Field Drags</a></li>
<li>
<a href="#">Field Marking Equipment</a>
<ul>
<li><a href="#">Batter's Box Templates</a></li>
<li><a href="#">Dryline Markers</a></li>
<li><a href="#">Field Paint</a></li>
<li><a href="#">Field Sprayers</a></li>
<li><a href="#">Stencils</a></li>
</ul>
</li>
<li>
<a href="#">Field Tarps</a>
<ul>
<li><a href="#">Area Tarps</a></li>
<li><a href="#">Growth Covers / Protectors</a></li>
<li><a href="#">Infield Tarps</a></li>
<li><a href="#">Tarp Accessories</a></li>
</ul>
</li>
<li><a href="#">Hand Tools</a></li>
<li>
<a href="#">Irrigation, Hoses, Nozzles</a>
<ul>
<li><a href="#">Hoses & Hose Reels</a></li>
<li><a href="#">Irrigation</a></li>
<li><a href="#">Nozzles</a></li>
</ul>
</li>
<li><a href="#">Layout Tools</a></li>
<li><a href="#">Moisture Removal</a></li>
<li><a href="#">Mound Fortification</a></li>
<li><a href="#">Mowers & Stripers</a></li>
<li><a href="#">Soil Management</a></li>
<li><a href="#">Soil Amendments</a></li>
<li><a href="#">Spreaders & Sweepers</a></li>
<li><a href="#"> - VIEW ALL - </a></li>
</ul>
</li>
<li><a href="#">Game-Practice Equipment</a>
<ul class="sub_menu">
<li>
<a href="#">Baseball - Softball</a>
<ul>
<li><a href="#">Base Accessories</a></li>
<li><a href="#">Bases & Home Plates</a></li>
<li><a href="#">Game Accessories</a></li>
<li><a href="#">Pitching Rubbers</a></li>
</ul>
</li>
<li>
<a href="#">Batting Practice Equipment</a>
<ul>
<li><a href="#">Backstops</a></li>
<li><a href="#">Infield Screens</a></li>
<li><a href="#">Jugs Pitching Machines</a></li>
<li><a href="#">Turf Mats</a></li>
<li><a href="#">Turf Protectors</a></li>
<li><a href="#">Replacement Accessories</a></li>
</ul>
</li>
<li>
<a href="#">Batting Cages</a>
<ul>
<li><a href="#">Indoor</a></li>
<li><a href="#">Outdoor</a></li>
</ul>
</li>
<li>
<a href="#">Portable Mounds</a>
<ul>
<li><a href="#">Batting Practice Mounds</a></li>
<li><a href="#">Game Mounds</a></li>
<li><a href="#">Practice Mounds</a></li>
</ul>
</li>
<li>
<a href="#">Football</a>
<ul>
<li><a href="#">First Down Markers</a></li>
<li><a href="#">Football Accessories</a></li>
<li><a href="#">Football Goalposts</a></li>
</ul>
</li>
<li>
<a href="#">Soccer</a>
<ul>
<li><a href="#">Soccer Goals</a></li>
<li><a href="#">Soccer Accessories</a></li>
</ul>
</li>
<li><a href="#"> - VIEW ALL - </a></li>
</ul>
</li>
<li><a href="#">Training & Conditioning</a>
<ul class="sub_menu">
<li><a href="#">Ladders & Sticks</a></li>
<li><a href="#">Hurdles</a></li>
<li><a href="#">Training Accessories</a></li>
<li><a href="#">Smart-Cart Training System</a></li>
<li><a href="#">Smart-Hurdle Collection</a></li>
<li><a href="#"> - VIEW ALL - </a></li>
</ul>
</li>
<li><a href="http://www.bloggersstand.blogspot.com/">Add This</a>
<ul class="sub_menu">
<li><a href="#">Field Design</a></li>
<li><a href="#">Turf Management</a></li>
<li><a href="#">Training</a></li>
<li><a href="#"> - VIEW ALL - </a></li>
</ul>
</li>
</ul>
9. Now save your HTML/Javascript',Done!
If you have any query regarding drop down style mega menu css3 Navigation Menu Bar for blogger Feel free to ask,just drop your comment below.