Stylish Drop Down Mega Menu Css3 Navigation Bar

0
Stylish Drop Down Mega Menu Css3 Navigation Menu Bar for blogger

How To Add Stylish Drop Down Mega Menu Css3 Navigation Menu Bar For Blogger

1. Log in to blogger account
2. 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*/
ul.bloggersstand {
    position: relative;
}
ul.bloggersstand li {
list-style:none;
    font-weight: bold;
    float: left;
    zoom: 1;
    background: #0852F0 url(http://3.bp.blogspot.com/-iaXnSRQjd5A/UI9OdLuyf-I/AAAAAAAAANE/vuBeaK1n2CE/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(http://3.bp.blogspot.com/-iaXnSRQjd5A/UI9OdLuyf-I/AAAAAAAAANE/vuBeaK1n2CE/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;
}
6. Go to blogger and click Layout
7. Click Add Gadget and select HTML/Javascript
8. Paste below code
<ul class="bloggersstand">
         <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 &amp; Bleachers</a></li>
            <li><a href="#">Communication Devices</a></li>
            <li><a href="#">Dugouts</a></li>
            <li><a href="#">Fencing &amp; 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 &amp; 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 &amp; 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 &amp; Stripers</a></li>
            <li><a href="#">Soil Management</a></li>
            <li><a href="#">Soil Amendments</a></li>
            <li><a href="#">Spreaders &amp; 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 &amp; 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 &amp; Conditioning</a>
          <ul class="sub_menu">
            <li><a href="#">Ladders &amp; 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> 
*Change All # With Your Links.

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.  
how to add Stylish blue colour color Drop Down Mega Menu Css3 Navigation Menu Bar into for blogger blogspot,css3 html drop down big menu mega with hover effect
How To Add Stylish Drop Down Mega Menu Css3 Navigation Menu Bar For Blogger 1. Log in to blogg...
SUMMARY

how to add Stylish blue colour color Drop Down Mega Menu Css3 Navigation Menu Bar into for blogger blogspot,css3 html drop down big menu mega with hover effect

You Might Also Like:

We hope this article helped you to learn Stylish Drop Down Mega Menu Css3 Navigation Bar. If you have any question or any complication please don't hesitate to ask us.You can drop your message below in the comment box or you can Contact Us!. If you liked this article please join us on : Facebook | Twitter | Google+

SUBSCRIBE ARTICLES BY EMAIL

Post a Comment Blogger Disqus

0 Comments on "Stylish Drop Down Mega Menu Css3 Navigation Bar" So Far
Out Of Topic Show Conversion CodeHide Conversion Code Featured Post

MARKUP FOR WRITING COMMENTS:
1. To Insert Code Length Use<i rel="pre">Code Here</i>
2. To Insert Short Codes Use<i rel="code">Code Here</i>
3. To Insert Quote Use<b rel="quote">Quote</b>
4. To Insert Image Use<i rel="image">Image URL</i>
5. To Insert Video Use<i rel="youtube">You Tube Url</i>

Note: You Can Also Convert Your Code Directly From The Conversion Box.
--------------------------------------------------------------------------------------------------------------------------------------------------------
Please drop your comment according with the topic and feedback with hyperlinks may be removed.Thank you.
Regards:
Team Bloggersstand