2013 January 22 Archive - EXEIdeas – Let's Your Mind Rock

You can find a lot of different menu styles on the web today. Similarly designers and developers are often more than happy to share their techniques with the world. And through these tutorials new designers can learn about trends and how to build websites semantically.Today, I am Going to posting a article about how to add css Horizontal drop down Menu with sub menu for blogger blog. if you are using blogger platform blog and if you want to add sub-menu for each category this are not available from blogger by default templates. So you can add this hovering Menu which are good and attractive black color.This is Drop down menu with sub menu that’s are very import to your website because who have a lot of sub categories and sub menu that’s are very useful this widget. Whenever visitor/readers land on any blog/website they browse for more categories or useful information via Menus or Tab Menus or Links widgets. Menu plays vital role for connecting all the content items in single widget make visitors/readers get very easily.It’s Time To Add Stylish HTML-CSS Without J-Query 5-Level Drop Down Menu With J-Query Effect For Blog & Website To Spice Them Up With Easy To Navigate Your Visitor In A Stylish Way.You can also use jquery menu but that was so heavy that your blog load timing become so high that visitors leave your website and blog and get angred and never visit your site/blog again, So use Only Css that can be loaded instantly. Get the stylish drop down menu for blogger just in two steps.which is amazing jquery effects contains inside it.#Demo {padding: 5px;border: 1px solid #ff0000; -moz-border-radius:6px; -webkit-border-radius:6px; background:#F8F8F8; box-shadow: 3px 3px 3px #D44B2C; width:200px; }#Demo{margin-bottom:5px;}#Demo a{color:#D44B2C;background:#F8F8F8;padding:8px 14px;display:inline-block;font-size:12px;line-height:12px;text-decoration:none;text-transform:uppercase;-moz-border-radius:5px;-khtml-border-radius:5px;-webkit-border-radius:5px;border-radius:5px} #Demo a:hover{color:#fff;text-shadow:0px 1px 0px #000;background:#D44B2C;text-decoration:none}CLICK HERE TO SEE DEMOFeatures:1.) Multi-Level Drop Down Menu With HTML-CSS Only. (No JavaScript Included).2.) Speed Loading Time Because There Is No JavaScript File.3.) J-Query Style With JavaScript File.4.) Simple And Stylish Design With Hover.5.) Cross Browser But Effect Will Not Work On IE.How To Add In Blogspot?1.) Go To Your www.blogger.com2.) Open Your Desire Blog.3.) Go To Layout.4.) Click “Add A Gadget” Where You Want To Add It.5.) Now Scroll To “HTML-JAVASCRIPT“6.) Click “+” Icon To Add It.7.) Now Copy The Below Code And Paste It To There.8.) Leave The Title Empty.9.) Click Save, Now You Are Done. How To Add In Website?1.) Just Go To Your HTML File.2.) Now Copy The Below Code And Paste It Between .3.) Save It, Now You Are Done. #mmenu, #mmenu ul {margin: 0;padding: 0;list-style: none;}#mmenu {width: 960px;margin: 60px auto;border: 1px solid #222;background-color: #111;background-image: -moz-linear-gradient(#444, #111); background-image: -webkit-gradient(linear, left top, left bottom, from(#444), to(#111)); background-image: -webkit-linear-gradient(#444, #111); background-image: -o-linear-gradient(#444, #111);background-image: -ms-linear-gradient(#444, #111);background-image: linear-gradient(#444, #111);-moz-border-radius: 6px;-webkit-border-radius: 6px;border-radius: 6px;-moz-box-shadow: 0 1px 1px #777, 0 1px 0 #666 inset;-webkit-box-shadow: 0 1px 1px #777, 0 1px 0 #666 inset;box-shadow: 0 1px 1px #777, 0 1px 0 #666 inset;}#mmenu:before,#mmenu:after {content: "";display: table;}#mmenu:after {clear: both;}#mmenu {zoom:1;}#mmenu 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;}#mmenu 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;}#mmenu li:hover > a {color: #fafafa;}*html #mmenu li a:hover { /* IE6 only */color: #fafafa;}#mmenu ul {margin: 20px 0 0 0;_margin: 0; /*IE6 only*/opacity: 0;visibility: hidden;position: absolute;top: 38px;left: 0;z-index: 9999; background: #444; background: -moz-linear-gradient(#444, #111);background-image: -webkit-gradient(linear, left top, left bottom, from(#444), to(#111));background: -webkit-linear-gradient(#444, #111); background: -o-linear-gradient(#444, #111); background: -ms-linear-gradient(#444, #111); background: linear-gradient(#444, #111);-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; } #mmenu li:hover > ul {opacity: 1;visibility: visible;margin: 0;}#mmenu 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); }#mmenu 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;}#mmenu ul li:last-child { -moz-box-shadow: none;-webkit-box-shadow: none;box-shadow: none; }#mmenu ul a { padding: 10px;width: 130px;_height: 10px; /*IE6 only*/display: block;white-space: nowrap;float: none;text-transform: none;}#mmenu ul a:hover {background-color: #0186ba;background-image: -moz-linear-gradient(#04acec, #0186ba); background-image: -webkit-gradient(linear, left top, left bottom, from(#04acec), to(#0186ba));background-image: -webkit-linear-gradient(#04acec, #0186ba);background-image: -o-linear-gradient(#04acec, #0186ba);background-image: -ms-linear-gradient(#04acec, #0186ba);background-image: linear-gradient(#04acec, #0186ba);}#mmenu 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;}#mmenu 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;}#mmenu 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;}#mmenu ul li:first-child a:hover:after {border-bottom-color: #04acec; }#mmenu ul ul li:first-child a:hover:after {border-right-color: #0299d3; border-bottom-color: transparent; }#mmenu 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;} Main Categories CSS Graphic design Development tools Web design Work About Contact Customization:1.) Change The Coloured Text Into Your Desire One….2.) Done…NOTE: This Is Single Level Drop-Down Menu, For Multi Level As Shown In Screen Shoot, Please Leave A Comment With Your E-Mail To Get It.