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.