Add a Simple CSS3 jQuery Drop Down Meny

First, it's cery easy to make and second, it's nice. Third... let's see how is working. This is best for black backgrounds but it's totally irelevant, you can place it wherever you want.
First demo and then let's make in two easy steps. Maybe you will have to modify something like a widht, pading but that's easy, wright.


Live Demo


How to make in two easy step? Well... here you go:
1. Find this code ( as ussual it's ]]></b:skin>) and press CTRL + F
2.Next code add just above, above red colored:
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; }   


3. Now go to "Layout" >Add gadget>HTML/JavaScript and add this code

<li><a href="http://html-css-encoder.blogspot.com/">Live demo</a></li><li> <a href="#">Categories</a> <ul><li><a href="#">CSS</a></li><li><a href="#">Graphic design</a></li><li><a href="#">Development tools</a></li><li><a href="#">Web design</a></li></ul></li><li><a href="#">Work</a></li><li><a href="#">About</a></li><li><a href="#">Contact</a></li></div>

Save and you are done. That's all, happy blogging :)