Tuesday 10 September 2013

How to build a CSS3 drop down menu


I always thought creating navigation menu using pure css was something only the css black belt could do. After some coding headache (I should admit!) I managed to design a drop-down menu using pure css. This article explains step by step how I did it from scratch. Don’t worry you won’t need to spend hours in front for Photoshop gradients, borders and shadows. I have made use of CSS3 to reproduce the same effect.In this tutorial you will learn how to use :



  • The prefixes -Moz-/-webkit-

  • Gradient effect in CSS3

  • Text-shadow or a box-shadow in CSS3

  • Rounded corners (without using images) in CSS3


Some CSS style has been skipped such as aligning the login menu to the right so as to keep it simple to understand .You can download the full source code from above and play with it so that you can get a better understanding of how things work.

No comments:

Post a Comment