LATEST >>

Welcome Here And Thanks For Visiting. Like Us On Facebook...

EXEIdeas – Let's Your Mind Rock » Blogspot / Blogspot Navigation Bar / Website / Website Navigation Bar » Simple Single Level Dropdown Menu With Pure Short CSS3

Simple Single Level Dropdown Menu With Pure Short CSS3

Simple Single Level Dropdown Menu With Pure Short CSS3

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

Recommended For You:
Few Essential Tips That Web Designer Needs To Understand

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.

Recommended For You:
How To Add Official Tags Cloud In Blogspot Using Labels Gadget?

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.

You Like It, Please Share This Recipe With Your Friends Using...

16 Responses to “Simple Single Level Dropdown Menu With Pure Short CSS3”

  1. shafa says:

    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.

  2. rumahdewi says:

    thanks a lot for your script
    i have applied it in my personal website.
    thanks again.
    keep posting more helpful article.. 😀

  3. Jack Rowe says:

    I love the efforts you have put in this, thanks for all the great blog posts

  4. 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.

  5. Zubair says:

    i visit your site good article and good posts i know you really hard work in this site thanks for sharing…

  6. 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?

  7. 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.

  8. faisal shabbir says:

    thank admin for really good work your work is so nice i really like it very much

Leave a Reply to rumahdewi Cancel reply

Your email address will not be published. Required fields are marked *