Navigation Menu #1 : Simple one using CSS

Hello buddies, today I've come up with a super simple navigation menubar using CSS and CSS3 transition. Focusing on the basics of navigation menu, it is made using unordered list. The list-style-type is set to none, so that all the bullets before the lists are removed. Before going through the tutorial, I hope you're familiar to CSS basics and CSS3 Transitions. If you're not then please hop over to the resource section to make those topics clear in your mind.

You should look the live demo of the Menubar before going through the tutorial.

Live Demo

What is CSS Reset and How to Use it?

What is CSS Resets?

You would have probably seen in source codes many sites the comment " /* CSS Resets */ ". The thing is really simple. Every browser(IE,Chrome,Firefox,etc.) sets their own default CSS properties. Like blue color for anchor links and Purple for visited anchor links(You may have noticed while testing html files). Another example, in Firefox all focused anchor links ( :focus selector) have blue dashed-borders and in chrome yellow border. See, below image.

Image courtesy: Six Revisions

    So what CSS Reset does is: It resets all default browser CSS properties to our own default properties. We can set our own default properties according to our needs and website needs. It actually tells the browser that you are the boss.