CSS3 make Web page drop-down menu code explanation

When I was writing a Notepad theme for WordPress, I stopped by learning some of the new CSS3 features that I now share. Viewing the demo You can see a multilevel pull-down menu similar to the Mac style, created using Border-radius,box-shadow and Text-shadow. Perfectly rendered in Firefox,safari and Chrome browsers. Even browsers such as ie7+, which are incompatible with CSS3, can render the page normally, ignoring the rendering of rounded corners and shadows.

View Demo: Http://www.webdesignerwall.com/demo/css3-dropdown-menu

Preview

The following illustration shows the menu style in an incompatible CSS3 situation.

A gradient image was used

White transparent images are used to achieve a gradient effect. Because the new CSS3 gradient feature has not been supported by all browsers, it is safer to use a simple background image.

The intensity of the gradient can be changed by switching the up or down of the background image. In addition, the gradient color can easily be adjusted by changing the background color.

CSS Code

I'm not going to explain CSS code on a line-by-row basis. The following picture is a good explanation for the key point of writing a drop-down menu.

English manuscript:CSS3 Dropdown Menu webdesignerwall