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.
Table of Contents
Features:
1.) Pure CSS3 And HTML.
2.) No JavaScript Or JQuery File Or Code.
3.) Quick To Load And Easy To Install
4.) 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.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.
OR
1.) Go To Your www.blogger.com
2.) Open Your Desire “Blog“.
3.) Go To “Template“.
4.) Click “Edit HTML“.
5.) Now Click Within Code Box.
6.) Press [CTRL+F] To Search <body> Code.
7.) Now Copy The Below Code And Paste It Between “<body> </body>“.
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 “<body> </body>“.
3.) Save It, Now You Are Done.
<style>
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;}
</style>
<nav>
<ul>
<li><a href="###">Home</a></li>
<li class="exedrop"><a href="###">Categories</a>
<ul class="exeexedropNav">
<li><a href="###">Categories 1</a></li>
<li><a href="###">Categories 2</a></li>
<li><a href="###">Categories 3</a></li>
</ul>
</li>
<li><a href="###">Contact</a></li>
</ul>
</nav>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.
its nice info for us we and many others people are learning from your blogs. its very appreciating. we are waiting of your next booming blog
ts nice information for us and its very useful for me and and my Carrier.
Welcome here and thanks for liking our article. Stay with us to get more like this…
thanks a lot for your script
i have applied it in my personal website.
thanks again.
keep posting more helpful article.. 😀
Welcome here and thanks for liking our code.
I love the efforts you have put in this, thanks for all the great blog posts
Welcome here and thanks for liking our article.
About the good menu for the site on CSS to be pleasant to me your style of a code, from time to time will come here and to look new realized идеиб thanks for a code.
Welcome here and thanks for liking our article. Stay with us to get more like this…
i visit your site good article and good posts i know you really hard work in this site thanks for sharing…
Welcome here and thanks for liking our article.
Thanks. It works nicely. But, (1) can I just use the style of the default page bar style from blogspot? It is more easier for me to modify (2) how to use multilevel dropdown?
You can change its style easily. Its a single level dropdown menu. Use other multi level drop down menu..
Wait a minute. By blog content suddenly only appears a half of it, probably after I put the drop down menu. The rest of the content disappear of the blogger (the post is still normal and full at the dashboard post). I do not modify any other.
Welcome here and thanks for using our code and sharing your view. Let us see your DEMO blog where you are using it so we can fix it.
thank admin for really good work your work is so nice i really like it very much
Welcome here and thanks for using our code and sharing your view.