Css3 Drop Down Navigation Menu For Blogger! ~ MyTricksWeb

We Are Come Back With How to add simple Css3
drop down menu bar for your blogger. There are small
icons on sub menu. This menu bar works with every
internet browsers.You can link with your main pages
by using this navigation. Im using Css3 and HTML,
Just check out demo.Its easy to add to blogger get my
all menu bar here.....

Demo

1. Log in to blogger account and Click drop down.

blog-post-option

2. Now select "Template" Like Below.

Select-template

3. Now you can see Live on blog, Click EDIT HTML Button"

4. Now click Proceed button.

5. Find this tag by using Ctrl+F ]]>

6. Paste below code Before ]]> tag

-------------------------------------HTML CODE-----------------------------------------

/* The CSS Code for the menu starts here tricksweb.blogspot.com */

.btrix_menu,.btrix_menu ul,.btrix_menu li,.btrix_menu a {

margin: 0;

padding: 0;

border: none;

outline: none;

}

.btrix_menu {

height: 40px;

width: 525px;

background: #4c4e5a;

background: -webkit-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);

background: -moz-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);

background: -o-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);

background: -ms-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);

background: linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);

-webkit-border-radius: 5px;

-moz-border-radius: 5px;

border-radius: 5px;

}

.btrix_menu li {

position: relative;

list-style: none;

float: left;

display: block;

height: 40px;

}

.btrix_menu li a {

display: block;

padding: 0 14px;

margin: 6px 0;

line-height: 28px;

text-decoration: none;

border-left: 1px solid #393942;

border-right: 1px solid #4f5058;

font-family: Helvetica, Arial, sans-serif;

font-weight: bold;

font-size: 13px;

color: #f3f3f3;

text-shadow: 1px 1px 1px rgba(0,0,0,.6);

-webkit-transition: color .2s ease-in-out;

-moz-transition: color .2s ease-in-out;

-o-transition: color .2s ease-in-out;

-ms-transition: color .2s ease-in-out;

transition: color .2s ease-in-out;

}

.btrix_menu li:first-child a { border-left: none; }

.btrix_menu li:last-child a{ border-right: none; }

.btrix_menu li:hover > a { color: #8fde62; }

.btrix_menu ul {

position: absolute;

top: 40px;

left: 0;

opacity: 0;

background: #1f2024;

-webkit-border-radius: 0 0 5px 5px;

-moz-border-radius: 0 0 5px 5px;

border-radius: 0 0 5px 5px;

-webkit-transition: opacity .25s ease .1s;

-moz-transition: opacity .25s ease .1s;

-o-transition: opacity .25s ease .1s;

-ms-transition: opacity .25s ease .1s;

transition: opacity .25s ease .1s;

}

.btrix_menu li:hover > ul { opacity: 1; }

.btrix_menu ul li {

height: 0;

overflow: hidden;

padding: 0;

-webkit-transition: height .25s ease .1s;

-moz-transition: height .25s ease .1s;

-o-transition: height .25s ease .1s;

-ms-transition: height .25s ease .1s;

transition: height .25s ease .1s;

}

.btrix_menu li:hover > ul li {

height: 36px;

overflow: visible;

padding: 0;

}

.btrix_menu ul li a {

width: 100px;

padding: 4px 0 4px 40px;

margin: 0;

border: none;

border-bottom: 1px solid #353539;

}

.btrix_menu ul li:last-child a { border: none; }

.btrix_menu a.documents { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOGt4fJlCCY6zIBWm7YMgALH3wob3qq_QUp3GbugNIP78li_PyXyJ01tcUzZUazsEVaWwwbOI9ENefeknXfWX0rbLWzUKL99RRFw4ttStglf5_vmZYoSbQn630pkxkd5SbCSBOk_uwHcs4/s1600/docs.png) no-repeat 6px center; }

.btrix_menu a.messages { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5PhaEgMNPC0aNQgLzxWu2cr3EI3zXBa9-FagEJ1OybFe5SH5qYPoeHMs_RlIysX27cQxqxECH0JWxoz5kZmGiVb94ttj7EuWhqvXyZt8AVrOHJ-TGatLfC01iZ_uEYMU_xbScBxnKPwQw/s1600/bubble.png) no-repeat 6px center; }

.btrix_menu a.signout { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQrdIM84uDYeIEidV1MhIf6JsQINakMA8OKnMZbDk6_0ru5vnUR7WkdH4c3JQOinpwvad-138w6vhowAxIeq638o6Ju39BF6iAHKskntZzcOKkKPC8KKcYeLe-CJEpfmM1BOq-Wn6C0VAE/s1600/arrow.png) no-repeat 6px center; }

----------------------------------------HTML CODE----------------------------------

7. Go to blogger and click Layout

8. Click Add Gadget and select 'HTML/Javascript

9. Download and Paste below code.

Download CODE :