Today I’m going show (explain) how to add pure css3 menu bar your blogger blog, actually the menu bar contains sub menu text.This makes your blog more attractive when your add this in your blog Step1:
Login blogger account
Step2:
Go to layout
Step3:
Click Add Gadget and select “HTML/JavaScript”
Step4:
Copy and Paste the below code
DEMO
#menu ul {
list-style:none;
font-family:segoe ui light;
font-size: 28px;
font-weight:d bold;
letter-spacing: 1-1px;
line-height: 1.1em;
float:left;
clear:both;
margin:20px;
-webkit-transition:-webkit-transform .5s, background-color .5s;
}
#menu ul li{
float:left;
}
#menu ul li a{
display:block;
text-decoration:none;
padding:10px 10px 5px 10px;
color:#fff;
background-color:#323232;
width:170px;
-webkit-transition:-webkit-transform 1s, background-color 1s;
}
#menu ul li a span{
display:block;
}
#menu ul li a:hover{
background-color:#fff;
}
#menu ul li a:hover span.title{
color:#323232;
}
#menu ul li a span.text{
padding:0px 5px;
font-family: segoe ui light;
font-size: 14px;
/*font-style: italic;*/
font-weight: normal;
letter-spacing: normal;
line-height:20px;
background-color:#323232;
visibility:hidden;
color:#fff;
-webkit-transition:-webkit-transform 1s, background-color 1s, visibility 1s;
}
#menu ul li a:hover span.text{
visibility:visible;
}