CSS Box mode two

Since my tutorial "CSS Box mode detailed" published, has been the praise and support of netizens, today, in response to the request of users, but also in order to thank the support of netizens, I will launch a sequel tutorial to deepen your understanding of CSS box mode. This tutorial is for readers or div-typesetting beginners, if you are a master, then don't waste your time.

This time I will explain the production of a vertical CSS navigation bar instance, in the course of the tutorial will be used in the previous release of the "box" concept, if you have not read the previous tutorial, or you do not understand what is the "box" concept, please first through the following two links to read my previous published tutorials, After watching this tutorial, please forgive me if you have any inconvenience.

Using CSS as a navigation bar is an easy thing to do, in my previous published tutorial in fact there is a simple horizontal navigation bar production, at that time only gave the style code did not make too many explanations, this time to do a relatively complex navigation bar, in order to deepen the understanding of CSS Box mode, Select a navigation bar with a multi-tiered div nesting implementation.

First look at the implementation of the principle of animation demo:

　　

Sample code Run Browse: http://tech.ddvip.com/yssl/29811/29811.html

In the second view the result diagram:

　　

The link in this navigation bar uses the background picture to switch the effect, the mouse moves to the link the navigation bar background picture and the text color will follow the change, the entire navigation uses the following 4 picture material:

　　

[1] [2] [3] [4] Next page