It is always fun to learn and explore the new standards introduced for CSS. With growing development in HTML5 and CSS3, heavy scripts and flash tools are pushed back. This Mac-like multi-level drop down menu that we will learn to create and how to add it to Blogger is solely based on Pure CSS3 with no jquery used at all! It uses simple box-shadow, text-shadow and border-radius properties.
It is compatible with all major browsers like FireFox, Chrome and Safari. Since IE7+ always lack compatibility with CSS3 therefore only the rounded borders will not render in IE7. I have kept the installation extremely easy. You just need to copy and paste the code. This Menu is provided by Web Designer Wall guys.
| DEMO Screen Shoot |
Table of Contents
Features:
1.) MultiLevel DropDown Menu.
2.) Pure HTMl,CSS Code.
3.) No JQuery, JavaScript.
4.) Quick To Load And Easy To Install.
5.) Awesome And Stylish In Look.
6.) Based Upon <ul> <li> That Will Help You In Gaining SiteLinks On Google.
7.) You Can Change Color Easily And The Gradient Will Be Automatically Changed.
8.) Cross Browsers Support.
How To Add In Blogspot?
1.) Go To Your www.blogger.com
2.) 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 <body> </body>.
3.) Save It, Now You Are Done.
<style>#exe-Container{font:normal 1em Arial,Helvetica,sans-serif;width:100%;float:left}a{color:#333}#exenav{margin:0;padding:7px 6px 0; background:#0080ff url(https://2.bp.blogspot.com/-A86MDTlHnVo/TtC-qF3gIQI/AAAAAAAAFbw/Vv41gIktCig/s1600/gradient.png) repeat-x 0 -110px; line-height:100%; border-radius:2em; -webkit-border-radius:2em; -moz-border-radius:2em; -webkit-box-shadow:0 1px 3px rgba(0,0,0,.4); -moz-box-shadow:0 1px 3px rgba(0,0,0,.4)}#exenav li{ margin:0 5px; padding:0 0 8px; float:left; position:relative; list-style:none}#exenav a{ font-weight:bold; color:#e7e5e5; text-decoration:none; display:block; padding: 8px 20px; margin:0; -webkit-border-radius:1.6em; -moz-border-radius:1.6em; text-shadow:0 1px 1px rgba(0,0,0,.3)}#exenav a:hover{ background:#000; color:#fff}#exenav .current a,#exenav li:hover >a{ background:#666 url(https://2.bp.blogspot.com/-A86MDTlHnVo/TtC-qF3gIQI/AAAAAAAAFbw/Vv41gIktCig/s1600/gradient.png) repeat-x 0 -40px; color:#444; border-top:solid 1px #f8f8f8; -webkit-box-shadow:0 1px 1px rgba(0,0,0,.2); -moz-box-shadow:0 1px 1px rgba(0,0,0,.2); box-shadow:0 1px 1px rgba(0,0,0,.2); text-shadow:0 1px 0 rgba(255,255,255,1)}#exenav ul li:hover a,#exenav li:hover li a{ background:none; border:none; color:#666; -webkit-box-shadow:none; -moz-box-shadow:none}#exenav ul a:hover{ background:#0080ff url(https://2.bp.blogspot.com/-A86MDTlHnVo/TtC-qF3gIQI/AAAAAAAAFbw/Vv41gIktCig/s1600/gradient.png) repeat-x 0 -100px !important; color:#fff !important;text-align:left; -webkit-border-radius:0; -moz-border-radius:0; text-shadow:0 1px 1px rgba(0,0,0,.1)}#exenav li:hover >ul{ display:block}#exenav ul{ display:none;text-align:left; margin:0; padding:0; width:185px; position:absolute; top:35px; left:0; background:#ddd url(https://2.bp.blogspot.com/-A86MDTlHnVo/TtC-qF3gIQI/AAAAAAAAFbw/Vv41gIktCig/s1600/gradient.png) repeat-x 0 0; border:solid 1px #b4b4b4; -webkit-border-radius:10px; -moz-border-radius:10px; border-radius:10px; -webkit-box-shadow:0 1px 3px rgba(0,0,0,.3); -moz-box-shadow:0 1px 3px rgba(0,0,0,.3); box-shadow:0 1px 3px rgba(0,0,0,.3)}#exenav ul li{ float:none; margin:0; padding:0}#exenav ul a{ font-weight:normal; text-shadow:0 1px 0 #fff}#exenav ul ul{ left:181px; top:-3px}#exenav ul li:first-child >a{ -webkit-border-top-left-radius:9px;-moz-border-radius-topleft:9px;-webkit-border-top-right-radius:9px; -moz-border-radius-topright:9px}#exenav ul li:last-child >a{ -webkit-border-bottom-left-radius:9px; -moz-border-radius-bottomleft:9px;-webkit-border-bottom-right-radius:9px;-moz-border-radius-bottomright:9px}#exenav:after{content:".";display:block;clear:both;visibility:hidden;line-height:0; height:0}#exenav{display:inline-block}</style>
<div id="exe-Container">
<ul id="exenav">
<li class="current"><a href="#">Home</a></li>
<li><a href="#">Multi-Levels 1</a>
<ul>
<li><a href="#">Sub-Row</a>
<ul>
<li><a href="#">Sub Sub-Row 1</a></li>
<li><a href="#">Sub Sub-Row 1</a></li>
<li><a href="#">Sub Sub-Row 1</a></li>
<li><a href="#">Sub Sub-Row 1</a></li>
</li>
</ul>
</li>
<li><a href="#">Sub-Row</a>
<ul>
<li><a href="#">Sub Sub-Row 2</a></li>
<li><a href="#">Sub Sub-Row 2</a></li>
<li><a href="#">Sub Sub-Row 2</a></li>
</ul>
</li>
<li><a href="#">Sub-Row</a>
<ul>
<li><a href="#">Sub Sub-Row 3</a></li>
<li><a href="#">Sub Sub-Row 3</a></li>
</ul>
</li>
<li><a href="#">Sub-Row</a>
<ul>
<li><a href="#">Sub Sub-Row 4</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Gallery</a></li>
<li><a href="#">Sitemap</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact Us</a></li>
<li><a href="#">About Us</a></li>
</ul>
</div>Customization:
1.) Change All Black Bold Text With Your Data.
2.) Change All The Blue Hash With Your Data Link.
3.) To Change The Color Of The Menu, Simply Replace #0080ff With A Colour Of Your Choice. You May Use Our Color Generator Tool
How much do would you charge to customize my blog with these drop down menus, i’ at http://lilyseymour.blogspot.com. I also need to have my Blog pointed to my domain http://www.lilyseymour.com.
Send An E-Mail At (admin@exeideas.tk) For More Info…
Useful Article. i using in my website. Thank u so much.
You Are Welcome To Visit Us…
my blog is ping-mirror.blogspot.com , can u just direct me how to replace that blue hash to our particular label link in submenu please , thanks
There Is No Menu On The Given Link…