CSS Green navigation menu making example

Most of the menu on the site is implemented by CSS, whether it is driven by the effect of the painting, or without animation effect, whether it is a level menu or multi-level menu, whether it is a horizontal menu, and whether vertical menu, almost all with CSS close relationship. Now use CSS code to combat a simple green navigation menu, is a basic menu, not using jquery, also did not add animation effect, the goal is to let CSS novice learn how to make a simple CSS menu.

First come to the CSS menu code, in order to facilitate understanding, here in the key places have added comments.

CSS code is written, first save as a menu.css file, the following to introduce this file, CSS applied to the image, the following is the Web page on the menu object definition:

OK, save the above page as menu.html, and Menu.css file together, double-click Run menu.html, you can see the menu effect, as shown in the following figure: