2015 June 12 Archive - EXEIdeas – Let's Your Mind Rock

After many Menu Bar that we shared previously in our blog, here we are with new one and this time we paid attention of simple and shot codind but also didn’t forget the design so here we have our simple single level dropdown menu that is based upon CSS3 and there is no image, javascript or jquery added. Alright, time to try a pure CSS dropdown menu tutorial.While some offer simple link display through lists, other websites opt in using drop down menus as navigation options for creating a website that’s clutter-free and cleaner-looking. It also saves a lot of space, which can be used for advertisements and content that is more valuable. And because there are sites that go with different themes, website owners are prompted to find the best codes that would perfectly fit to their site from these 35 drop down menu scripts that are worth the look.Today you’ll learn how to create your own CSS3 dropdown menu, without any additional Javascript code. There are no images used and, as usual, minimal HTML markup. Let’s see how is made. But before proceeding don’t forget to check out the DEMO.CLICK HERE TO SEE DEMO Features:1.) Pure CSS3 And HTML.2.) No JavaScript Or JQuery File Or Code.3.) Quick To Load And Easy To Install4.) Single Level DropDown Menu.5.) Automatically Mention The DropDown Link.6.) Can Add Unlimited Links.7.) Can Add Unlimited DropDown Menu.8.) Responsive Menu.9.) Awesome In Look.10.) Single Color.11.) Short And Easy Coding.12.) Fully Customizable.13.) SEO Optimized.14.) Can Provide Links To Search Engine SiteLinks.15.) Compatible With Top Browsers.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.OR1.) Go To Your www.blogger.com2.) Open Your Desire “Blog“.3.) Go To “Template“.4.) Click “Edit HTML“.5.) Now Click Within Code Box.6.) Press [CTRL+F] To Search Code.7.) Now Copy The Below Code And Paste It Between “ “.8.) Click “Save Template” And 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. li {list-style:none !important;color:#FFF;padding:5px;font-size:0px;text-decoration:none;}li > a:after {content:' ->';}li > a:only-child:after {content:'';} nav ul {background-color:#f9760b;padding:0;margin:0;}nav ul li {list-style:none;line-height:44px;float:left;background-color:#f9760b;}nav ul li a {color:#FFF;padding:10px;font-size:20px;text-decoration:none;}li a:hover {border-bottom:3px #FFF solid;}nav .exeexedropNav {display:none;border-bottom: 2px solid white;border-right: 2px solid white;border-left: 2px solid white;}nav ul .exedrop:hover .exeexedropNav {z-index:99999;display:list-item !important;position:absolute;margin-top:5px;margin-left:-3px;}nav ul .exedrop:hover .exeexedropNav li {float:none;} Home Categories Categories 1 Categories 2 Categories 3 Contact Customization:1.) Just Change ### With Your Links.2.) And Red Text With Your Link Name.3.) Add More If You Want Through Copying The Code From It.4.) Save And Done.Last Words:That’s all. You can easily see that how simple the code is and how awesome. You can change it with your desire also. If you want to add more simple links or dropdown link then feel free to contact us and don’t forget to comment your views about this.