<< .. Go to : : Home : : Exercise 10 : : Demo 10A : : Demo 10B : : Demo 10C : : Demo 10D : : Demo 10E : : All Class Demos .. >>

Exercise 10 Demo: Part D : Drop Down Menu

Drop Down Menu with CSS3

Here is an example of a drop down menu styled with CSS3. It is not supported everywhere - so think of that when you use it. But try it out, play with colors, values, etc. View the source and styles to see how it is done.

This menu has two levels of drop downs. One level is optimal, two gets harder to use. You can see that the second level overlaps the first so you can scroll over to it without losing the first one. In the code the 2nd level of navigation has a style that positions it left: 151px; ... If you make the buttons narrower or wider, be sure to adjust this component.

This demo uses shadows, gradients and border-radius. All developed for CSS3.

© Claudia Faulk. Created in 2012.