Attractive CSS3 Drop Down Menu For Blogger

SOCIALIZE IT →

Tweet

Hello, Today we are going to share about attractive css3 drop down menu for blogger.You might have seen many others drop down menu but this is unique.CSS3 drop down menu makes your blog attractive.The drop down menu helps our readers easily navigate through our blog.This drop down have different mouse hover effect.Hope you would like this one.So, let's follow the steps to add into your blog

How To Add It On Your Blogger?

• Log In To Blogger.com
• Go To Your Blogger Dashboard
• Navigate To Template And Click On Edit HTML
• Now Find ]]></b:skin> using CTRL+F
• Copy The Provided Below Code And Paste Above/Before ]]></b:skin>

 /* The CSS3 Code for the menu starts here http://softwarebloggger.blogspot.com*/
#TechBlogGuideCSSMenu{
clear:both;
margin:5px auto;
border:0px solid #000;
font-size:12px;
font-family: verdana;
height: 236px;
}
ul#li{color:black;}
ul#level-one{
width:700px;
height: 36px;
position: relative;
list-style: none;
line-height:36px;
background:#f0f0f0 url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGwSM4aLLT4UT_pNSk_ikWvpwvIKcwHxFNO2MZQFVa8Vq3LDT9VsF8HGVe74xtcdcQcero_mDwg82sb4kAxIel25z-NrhAVkEsRq4NLttz09Um1XeUzHe_vZWI5SMgBTeNpklAjN2goWs/s1600/TBG_menu-back.png") repeat-x bottom left;/* for non-css3 browsers */
background: -webkit-gradient(linear, left top, left bottom, from(#FFFFFF), to(#f0f0f0)); /* for webkit browsers */
background: -moz-linear-gradient(top, #FFFFFF, #f0f0f0); /* for firefox 3.6+ */ border:solid 1px #4d4d4d;
-moz-border-radius-topleft: 11px;-moz-border-radius-topright:11px;
-moz-border-radius-bottomleft:11px;
-moz-border-radius-bottomright:10px;
-webkit-border-top-left-radius:11px;
-webkit-border-top-right-radius:11px;
-webkit-border-bottom-left-radius:11px;
-webkit-border-bottom-right-radius:10px;
border-top-left-radius:11px;
border-top-right-radius:11px;
border-bottom-left-radius:11px;
border-bottom-right-radius:10px;
}
ul#level-one li{
width:80px;
float: left;
font-weight: bold;
font-family: Arial;
padding-left: 12px;
border:solid 0px #000000;-moz-border-radius-topleft: 11px;-moz-border-radius-topright:11px;
-moz-border-radius-bottomleft:11px;
-moz-border-radius-bottomright:10px;
-webkit-border-top-left-radius:11px;
-webkit-border-top-right-radius:11px;
-webkit-border-bottom-left-radius:11px;
-webkit-border-bottom-right-radius:10px;
border-top-left-radius:11px;
border-top-right-radius:11px;
border-bottom-left-radius:11px;
border-bottom-right-radius:10px;
}
ul#level-one li:hover{
background:#FFA500;
border:solid 0px #000000;
-moz-border-radius-topleft: 11px;
-moz-border-radius-topright:11px;
-moz-border-radius-bottomleft:11px;
-moz-border-radius-bottomright:10px;
-webkit-border-top-left-radius:11px;
-webkit-border-top-right-radius:11px;
-webkit-border-bottom-left-radius:11px;
-webkit-border-bottom-right-radius:10px;
border-top-left-radius:11px;
border-top-right-radius:11px;
border-bottom-left-radius:11px;
border-bottom-right-radius:10px;
}
ul#level-two,ul#level-three,ul#level-four{
list-style: none;
background:#FFA500 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTmlTbJgjcLAKN3MZ8EcbytV-Y6V5hzBB2x_zHfJI46JE2BzRO1p0DHH9WE-DLYfLoJwoXIFo-L60PKMOTuoH0UrhhX9TZxOhsIYKEtIZFLcsji2AV5lmCxUgk-UGPem00ffR4sPPFUkU/s1600/TBG_menu-grad.png) repeat-x bottom left; /* for non-css3 browsers */
background: -webkit-gradient(linear, left top, left bottom, from(#FFA500), to(#FF4500)); /* for webkit browsers */
background: -moz-linear-gradient(top, #FFA500, #FF4500); /* for firefox 3.6+ */ display:none;
position:absolute;
top:36px;
padding:0;
width:200px;
height:240px;
border:0px solid red;
}
ul#level-two li,ul#level-three li,ul#level-four li{
width:196px;
padding-left:4px ;
line-height: 30px;
}
ul#level-two li:hover{
background:#f0f0f0 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibHWVpTZd-r3NH9oMXpMoyEIHBE57AbXOr-5pkChABusncfaMrPeYQCKygDVZmyAJ_xj7dZ0Xx44J_0rfNPj9jFthbBtnIIrC7HuTN5F0sotIUmHfJJHN6lPaN2GoK-Zn5sGethgvssMo/s1600/TBG_menu-li.png) repeat-x bottom left;/* for non-css3 browsers */
background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#c0c0c0)); /* for webkit browsers */
background: -moz-linear-gradient(top, #fff, #c0c0c0); /* for firefox 3.6+ */ border:solid 0px #000000;
-moz-border-radius-topleft: 11px;
-moz-border-radius-topright:11px;
-moz-border-radius-bottomleft:11px;
-moz-border-radius-bottomright:10px;
-webkit-border-top-left-radius:11px;
-webkit-border-top-right-radius:11px;
-webkit-border-bottom-left-radius:11px;
-webkit-border-bottom-right-radius:10px;
border-top-left-radius:11px;
border-top-right-radius:11px;
border-bottom-left-radius:11px;
border-bottom-right-radius:10px;
}
ul#level-one li:hover > ul#level-two,ul#level-one li:hover > ul#level-three,ul#level-one li:hover > ul#level-four {
display: block;
}
a{
width:200px;
text-align: center;
text-decoration: none;
color:#000000;
}
ul#level-three li:hover{
background: #00BFFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVl3yLDgPHCZbR2AB7hulFp817QE-wud8ZFn0ZF86ti93ye6BYki3jG6awiB9zqwmOCscHYs6d8yNHxfIG2tFcQYy0Eg0TCvU4nzzYbNZIaa79-MCEN6NPcOfG2lZVsyXlma8G7DnA1yw/s1600/TBG_menu-li-blue.png) repeat-x bottom left;
background: -webkit-gradient(linear, left top, left bottom, from(#00BFFF), to(#1E90FF)); /* for webkit browsers */
background: -moz-linear-gradient(top, #00BFFF, #1E90FF); /* for firefox 3.6+ */ border:solid 0px #000000;
-moz-border-radius-topleft: 11px;
-moz-border-radius-topright:11px;
-moz-border-radius-bottomleft:11px;
-moz-border-radius-bottomright:10px;
-webkit-border-top-left-radius:11px;
-webkit-border-top-right-radius:11px;
-webkit-border-bottom-left-radius:11px;
-webkit-border-bottom-right-radius:10px;
border-top-left-radius:11px;
border-top-right-radius:11px;
border-bottom-left-radius:11px;
border-bottom-right-radius:10px;
}

• Now Save Template

Again,

• Navigate To Layout And Add A Gadget
• Select HTML/JavaScript
• Copy The Given Below Code And Paste Inside It.

<div id="TechBlogGuideCSSMenu">
<ul id="level-one">
<li><a href="#">Home</a></li>
<li>Campaign
<ul id="level-two">
<li><a href="#">sub-Second</a></li>
<li><a href="#">sub-Second</a></li>
<li><a href="#">sub-Second</a></li>
<li><a href="#">sub-Second</a></li>
<li><a href="#">sub-Second</a></li>
<li><a href="#">sub-Second</a></li>
<li><a href="#">sub-Second</a></li>
<li><a href="#">sub-Second</a></li>
</ul>
</li>
<li>Download
<ul id="level-three"> <li><a href="#">sub-Second</a></li>
<li><a href="#">sub-Second</a></li>
<li><a href="#">sub-Second</a></li>
<li><a href="#">sub-Second</a></li>
<li><a href="#">sub-Second</a></li>
<li><a href="#">sub-Second</a></li>
<li><a href="#">sub-Second</a></li>
<li><a href="#">sub-Second</a></li>
</ul>
</li>
<li>List
<ul id="level-four">
<li><a href="#">sub-Second</a></li>
<li><a href="#">sub-Second</a></li>
<li><a href="#">sub-Second</a></li>
<li><a href="#">sub-Second</a></li>
<li><a href="#">sub-Second</a></li>
<li><a href="#">sub-Second</a></li>
<li><a href="#">sub-Second</a></li>
<li><a href="#">sub-Second</a></li>
</ul>
</li>
<li><a href="#">About</a></li>
<li><a href="#">Demo</a></li>
<li><a href="http://www.TechBlogGuide.blogspot.com">Get This>></a></li>
</ul>
</div>

Customization:

• Replace All # With Your Links.
• That's All

Get Free UpDates ?

If yes, Then enter your email below to get

more such great articles in your inbox

Powered By HAmza Gujjar Get Free !

SOCIALIZE and Widget By Hamza_Gujjar

SOCIALIZE IT →

Tweet

FOLLOW US →

SHARE IT →