Top 2 CSS drop down menu for Bloggers

MBC presenting CSS effect drop down menu for bloggers. This menus are helping your Blogger eye caching. The Menus are also creted only using CSS codes, no images are used in this menu. You will get 2 CSS effect drop menu. Are you intrested to see the DEMO of the menus then visit the below link.



MBC HTML Editor










CSS drop down menu Tab 1

<style> /*------ CSS3 Drop Down Menu By MBC (www.mybloggerclub.blogspot.com)---------*/ #mbc-menu, #mbc-menu ul { margin: 0; padding: 0; list-style: none; } #mbc-menu { width: 960px; margin: 60px auto; border: 1px solid #e90b9a; background-color: #e90b9a; background-image: -moz-linear-gradient(#4c1130, #e90b9a); background-image: -webkit-gradient(linear, left top, left bottom, from(#4c1130), to(#e90b9a)); background-image: -webkit-linear-gradient(#4c1130, #e90b9a); background-image: -o-linear-gradient(#4c1130,#e90b9a); background-image: -ms-linear-gradient(#4c1130, #e90b9a); background-image: linear-gradient(#4c1130, #e90b9a); -moz-border-radius: 6px; -webkit-border-radius: 6px; border-radius: 6px; -moz-box-shadow: 0 1px 1px #777; -webkit-box-shadow: 0 1px 1px #777; box-shadow: 0 1px 1px #777; } #mbc-menu:before, #mbc-menu:after { content: ""; display: table; } #mbc-menu:after { clear: both; } #mbc-menu { zoom:1; } #mbc-menu li { float: left; border-right: 1px solid #222; -moz-box-shadow: 1px 0 0 #444; -webkit-box-shadow: 1px 0 0 #444; box-shadow: 1px 0 0 #444; position: relative; } #mbc-menu a { float: left; padding: 12px 30px; color: #999; text-transform: uppercase; font: bold 12px Arial, Helvetica; text-decoration: none; text-shadow: 0 1px 0 #000; } #mbc-menu li:hover > a { color: #fafafa; } *html #mbc-menu li a:hover { /* IE6 only */ color: #fafafa; } #mbc-menu ul { margin: 20px 0 0 0; _margin: 0; /*IE6 only*/ opacity: 0; visibility: hidden; position: absolute; top: 38px; left: 0; z-index: 9999; background: #073763; background: -moz-linear-gradient(#073763, #9fc5e8); background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #9fc5e8),color-stop(1, #073763)); background: -webkit-linear-gradient(#073763,#9fc5e8); background: -o-linear-gradient(#073763, #9fc5e8); background: -ms-linear-gradient(#073763, #9fc5e8); background: linear-gradient(#073763, #9fc5e8); -moz-box-shadow: 0 -1px rgba(255,255,255,.3); -webkit-box-shadow: 0 -1px 0 rgba(255,255,255,.3); box-shadow: 0 -1px 0 rgba(255,255,255,.3); -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; -webkit-transition: all .2s ease-in-out; -moz-transition: all .2s ease-in-out; -ms-transition: all .2s ease-in-out; -o-transition: all .2s ease-in-out; transition: all .2s ease-in-out; } #mbc-menu li:hover > ul { opacity: 1; visibility: visible; margin: 0; } #mbc-menu ul ul { top: 0; left: 150px; margin: 0 0 0 20px; _margin: 0; /*IE6 only*/ -moz-box-shadow: -1px 0 0 rgba(255,255,255,.3); -webkit-box-shadow: -1px 0 0 rgba(255,255,255,.3); box-shadow: -1px 0 0 rgba(255,255,255,.3); } #mbc-menu ul li { float: none; display: block; border: 0; _line-height: 0; /*IE6 only*/ -moz-box-shadow: 0 1px 0 #111, 0 2px 0 #666; -webkit-box-shadow: 0 1px 0 #111, 0 2px 0 #666; box-shadow: 0 1px 0 #111, 0 2px 0 #666; } #mbc-menu ul li:last-child { -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; } #mbc-menu ul a { padding: 10px; width: 130px; _height: 10px; /*IE6 only*/ display: block; white-space: nowrap; float: none; text-transform: none; } #mbc-menu ul a:hover { background-color:#4c1130; background-image: -moz-linear-gradient(#4c1130, #e90b9a); background-image: -webkit-gradient(linear, left top, left bottom, from(#4c1130), to(#e90b9a)); background-image: -webkit-linear-gradient(#4c1130, #e90b9a); background-image: -o-linear-gradient(#4c1130, #e90b9a); background-image: -ms-linear-gradient(#4c1130, #e90b9a); background-image: linear-gradient(#4c1130, #e90b9a); } #mbc-menu ul li:first-child > a { -moz-border-radius: 3px 3px 0 0; -webkit-border-radius: 3px 3px 0 0; border-radius: 3px 3px 0 0; } #mbc-menu ul li:first-child > a:after { content: ''; position: absolute; left: 40px; top: -6px; border-left: 6px solid transparent; border-right: 6px solid transparent; border-bottom: 6px solid #444; } #mbc-menu ul ul li:first-child a:after { left: -6px; top: 50%; margin-top: -6px; border-left: 0; border-bottom: 6px solid transparent; border-top: 6px solid transparent; border-right: 6px solid #3b3b3b; } #mbc-menu ul li:first-child a:hover:after { border-bottom-color: #04acec; } #mbc-menu ul ul li:first-child a:hover:after { border-right-color: #0299d3; border-bottom-color: transparent; } #mbc-menu ul li:last-child > a { -moz-border-radius: 0 0 3px 3px; -webkit-border-radius: 0 0 3px 3px; border-radius: 0 0 3px 3px; } </style><br /> <br /> <br /> <ul id="mbc-menu"> <li><a href="#">Home</a></li> <li><br /> <a href="#">Blogger Tricks</a><br /> <ul> <li><a href="#">Blogger SEO</a></li> <li><a href="#">Blogger design</a></li> <li><a href="#">Blogger plugins</a></li> <li><a href="#">Blogger Widgets</a></li> </ul> </li> <li><a href="#">Blogger Tips</a></li> <li><a href="#">About</a></li> <li><a href="#">Contact</a></li> </ul>









CSS drop down menu Tab 2

<style> /*------ CSS3 Drop Down Menu By MBC (www.mybloggerclub.blogspot.com)---------*/ #mbc-menu, #mbc-menu ul { margin: 0; padding: 0; list-style: none; } #mbc-menu { width: 960px; margin: 60px auto; border: 1px solid #660000; background-color: #0b5394; background-image: -moz-linear-gradient(#660000, #0b5394); background-image: -webkit-gradient(linear, left top, left bottom, from(#660000), to(#0b5394)); background-image: -webkit-linear-gradient(#660000, #0b5394); background-image: -o-linear-gradient(#660000,#0b5394); background-image: -ms-linear-gradient(#660000, #0b5394); background-image: linear-gradient(#660000, #0b5394); -moz-border-radius: 6px; -webkit-border-radius: 6px; border-radius: 6px; -moz-box-shadow: 0 1px 1px #777; -webkit-box-shadow: 0 1px 1px #777; box-shadow: 0 1px 1px #777; } #mbc-menu:before, #mbc-menu:after { content: ""; display: table; } #mbc-menu:after { clear: both; } #mbc-menu { zoom:1; } #mbc-menu li { float: left; border-right: 1px solid #222; -moz-box-shadow: 1px 0 0 #444; -webkit-box-shadow: 1px 0 0 #444; box-shadow: 1px 0 0 #444; position: relative; } #mbc-menu a { float: left; padding: 12px 30px; color: #999; text-transform: uppercase; font: bold 12px Arial, Helvetica; text-decoration: none; text-shadow: 0 1px 0 #000; } #mbc-menu li:hover > a { color: #fafafa; } *html #mbc-menu li a:hover { /* IE6 only */ color: #fafafa; } #mbc-menu ul { margin: 20px 0 0 0; _margin: 0; /*IE6 only*/ opacity: 0; visibility: hidden; position: absolute; top: 38px; left: 0; z-index: 9999; background: #000000; background: -moz-linear-gradient(#ff00ff, #000000); background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #000000),color-stop(1, #ff00ff)); background: -webkit-linear-gradient(#ff00ff,#000000); background: -o-linear-gradient(#ff00ff, #000000); background: -ms-linear-gradient(#ff00ff, #000000); background: linear-gradient(#ff00ff, #000000); -moz-box-shadow: 0 -1px rgba(255,255,255,.3); -webkit-box-shadow: 0 -1px 0 rgba(255,255,255,.3); box-shadow: 0 -1px 0 rgba(255,255,255,.3); -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; -webkit-transition: all .2s ease-in-out; -moz-transition: all .2s ease-in-out; -ms-transition: all .2s ease-in-out; -o-transition: all .2s ease-in-out; transition: all .2s ease-in-out; } #mbc-menu li:hover > ul { opacity: 1; visibility: visible; margin: 0; } #mbc-menu ul ul { top: 0; left: 150px; margin: 0 0 0 20px; _margin: 0; /*IE6 only*/ -moz-box-shadow: -1px 0 0 rgba(255,255,255,.3); -webkit-box-shadow: -1px 0 0 rgba(255,255,255,.3); box-shadow: -1px 0 0 rgba(255,255,255,.3); } #mbc-menu ul li { float: none; display: block; border: 0; _line-height: 0; /*IE6 only*/ -moz-box-shadow: 0 1px 0 #111, 0 2px 0 #666; -webkit-box-shadow: 0 1px 0 #111, 0 2px 0 #666; box-shadow: 0 1px 0 #111, 0 2px 0 #666; } #mbc-menu ul li:last-child { -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; } #mbc-menu ul a { padding: 10px; width: 130px; _height: 10px; /*IE6 only*/ display: block; white-space: nowrap; float: none; text-transform: none; } #mbc-menu ul a:hover { background-color:#4c1130; background-image: -moz-linear-gradient(#4c1130, #e90b9a); background-image: -webkit-gradient(linear, left top, left bottom, from(#4c1130), to(#e90b9a)); background-image: -webkit-linear-gradient(#4c1130, #e90b9a); background-image: -o-linear-gradient(#4c1130, #e90b9a); background-image: -ms-linear-gradient(#4c1130, #e90b9a); background-image: linear-gradient(#4c1130, #e90b9a); } #mbc-menu ul li:first-child > a { -moz-border-radius: 3px 3px 0 0; -webkit-border-radius: 3px 3px 0 0; border-radius: 3px 3px 0 0; } #mbc-menu ul li:first-child > a:after { content: ''; position: absolute; left: 40px; top: -6px; border-left: 6px solid transparent; border-right: 6px solid transparent; border-bottom: 6px solid #444; } #mbc-menu ul ul li:first-child a:after { left: -6px; top: 50%; margin-top: -6px; border-left: 0; border-bottom: 6px solid transparent; border-top: 6px solid transparent; border-right: 6px solid #3b3b3b; } #mbc-menu ul li:first-child a:hover:after { border-bottom-color: #04acec; } #mbc-menu ul ul li:first-child a:hover:after { border-right-color: #0299d3; border-bottom-color: transparent; } #mbc-menu ul li:last-child > a { -moz-border-radius: 0 0 3px 3px; -webkit-border-radius: 0 0 3px 3px; border-radius: 0 0 3px 3px; } </style><br /> <br /> <br /> <ul id="mbc-menu"> <li><a href="#">Home</a></li> <li><br /> <a href="#">Blogger Tricks</a><br /> <ul> <li><a href="#">Blogger SEO</a></li> <li><a href="#">Blogger design</a></li> <li><a href="#">Blogger plugins</a></li> <li><a href="#">Blogger Widgets</a></li> </ul> </li> <li><a href="#">Blogger Tips</a></li> <li><a href="#">About</a></li> <li><a href="#">Contact</a></li> </ul><br />

Customization

Remove # and paste your blog link.

Credits

Friends i have created the menus very clearly with my hard effort of time. But i don't no that you what much love to this above menus. Lets me to first leave a comment.