Header Ads

  • Breaking News

    Add mega dropdown menu to blogger






    1. Log in to your blogger dashboard.
    2. Select your blog.
    3. Select Template option and click on Edit HTML option.
    4. In the template code find </header>
    5. Just below it paste following code and save the template.
    6. Open your blog to see the new changes


    <ul class="wc-megamenu" id="nav">
        <li class="wcnavlist"><a class="wclink" href="#">Home</a></li>
        <li class="wcnavlist"><span class="wclink">Categories</span>
        <ul>
            <li>
            <ul>
                <li><a href="#">Blogger</a></li>
                <li><a href="#">Widgets</a></li>
                <li><a href="#">Plugins</a></li>
                <li><a href="#">Templates</a></li>
                <li><a href="#">Wordpress</a></li>
                <li><a href="#">Wp plugins</a></li>
                <li><a href="#">Wp Themes</a></li>
                <li><a href="#">SEO</a></li>
                <li><a href="#">Traffic</a></li>
                <li><a href="#">CSS</a></li>
            </ul>
            </li>
            <li>
            <ul>
                <li><a href="#">JavaScript </a></li>
                <li><a href="#">HTML5 </a></li>
                <li><a href="#">Jquery </a></li>
                <li><a href="#">Responsive </a></li>
                <li><a href="#">Web design </a></li>
                <li><a href="#">Blogging Tips </a></li>
                <li><a href="#">Facebook </a></li>
                <li><a href="#">Twitter </a></li>
                <li><a href="#">Make money </a></li>
                <li><a href="#">Adsense </a></li>
            </ul>
            </li>
            <li>
            <ul>
                <li><a href="#">Services </a></li>
                <li><a href="#">Contact us </a></li>
                <li><a href="#">About us </a></li>
                <li><a href="#">Disclaimer</a></li>
                <li><a href="#">Privacy Policy </a></li>
                <li><a href="#">Terms of use </a></li>
                <li><a href="#">Item 7 </a></li>
                <li><a href="#">Item 8 </a></li>
                <li><a href="#">Item 9 </a></li>
                <li><a href="#">Item 10 </a></li>
            </ul>
            </li>
        </ul>
        </li>
        <li class="wcnavlist"><a class="wclink" href="#">Guest Post</a></li>
        <li class="wcnavlist"><a class="wclink" href="#">Contact Us</a></li>
        <li class="wcnavlist"><a class="wclink" href="#">Services</a></li>
        <li class="wcnavlist"><a class="wclink" href="#">Privacy Policy</a></li>
    </ul>
    <style type="text/css">ul.wc-megamenu li{
    font:16px georgia, verdana;
    }
    ul.wc-megamenu,ul.wc-megamenu li,ul.wc-megamenu ul
    {
    list-style:none;
    margin:0;
    padding:0
    }
    ul.wc-megamenu
    {position:relative;z-index:999;float:left;}
    ul.wc-megamenu li.hover,ul.wc-megamenu li:hover{position:relative;z-index:9999;color:#111111;text-decoration:none}
    ul.wc-megamenu ul li{float:none;font-weight:700}
    ul.wc-megamenu li:hover>ul{visibility:visible}
    ul.wc-megamenu{width:100%}
    ul.wc-megamenu ul li{float:left}
    ul.wc-megamenu li.hover,ul.wc-megamenu li:hover{position:static}
    ul.wc-megamenu ul ul{display:none!important}
    ul.wc-megamenu ul li{position:static;width:180px}
    ul.wc-megamenu ul ul{display:block!important;position:static;width:auto!important}
    ul.wc-megamenu ul ul li{float:none}
    ul.wc-megamenu ul ul ul{display:none}
    ul.wc-megamenu li.hover ul,ul.wc-megamenu li:hover ul{visibility:visible!important;color:#fff}
    ul.wc-megamenu{background: #111111; font:18px georgia, verdana;}
    ul.wc-megamenu a:link,ul.wc-megamenu a:visited{text-decoration:none;color:#2c539e;}
    ul.wc-megamenu a:hover{color:#fff}
    ul.wc-megamenu a:active{color:#2c539e;}
    ul.wc-megamenu li.last ul li{float:right}
    ul.wc-megamenu ul ul li{font-weight:400}
    ul.wc-megamenu li{float:left;min-height:1px;line-height:1.3em;vertical-align:middle;list-style:none;}
    ul.wc-megamenu li a{display:block;}
    ul.wc-megamenu ul{list-style:none;visibility:hidden;position:absolute;top:100%;left:0;z-index:99999;width:550px;font-size:14px;letter-spacing:normal;background:#222222; padding:0 0 0 10px}
    ul.wc-megamenu ul a{width:180px;padding:5px;color:#222222;}
    ul.wc-megamenu ul a:hover{background:#8fc800;}
    ul.wc-megamenu ul ul{padding:0;margin-left:-5px;top:1px;left:99%;margin-top:5px;text-transform:none}
    ul.wc-megamenu .wcnavlist{padding:4px 10px}
    .wclink,.wclink a:link,.wclink a:visited{color:#fff;font-size:18px}
    .wclink hover,.wclink a:link,.wclink a:visited.wclink a:active,.wclink a:hover{color:#fff}
    ul.wc-megamenu .wcnavlist a:link, ul.wc-megamenu .wcnavlist a:visited,ul.wc-megamenu .wcnavlist a:active{color:#fff}
    </style>
    




    No comments

    Post Top Ad

    Post Bottom Ad