"CSS" pure CSS Implementation level three navigation (template)

Previously felt that the Cascade navigation implementation should be very simple, is to use the CSS hover property to achieve it, so there is not too much attention to practice. However, in the recent interview, when asked this question to understand, a lot of things can not be taken for granted to do so, not only know the approximate idea of thinking OK, but also need practical ability.

Later on actually the implementation of cascading menus, take this opportunity to make it a template to learn with you.

Here is the HTML section:

<! DOCTYPE html>
CSS section:
Body,div,ul,li,a{margin:0;padding:0;text-decoration:none;} /* Level nav */.one-nav li{list-style-type:none;float:left;width:16.57%;text-align:center;background-color: #3391E6; border-right:1px solid white;cursor:pointer;height:30px;line-height:30px;}. One-nav Li:nth-last-child (1) {border-right:none;}. One-nav li A{color:white;}. One-nav li:hover. Two-nav{display:block;}. One-nav li:hover{background-color: #4260D7;} /* Level two navigation */.two-nav {Display:none;}. Two-nav li{width:100%;}. Two-nav li:hover. three-nav{display:block;position:relative;} /* Level three navigation */.three-nav{position:absolute;width:100%;left:100%;bottom:100%;} /* The rightmost level three navigation is shown on the left */.one-nav li:nth-last-child (1)  . Two-nav li  three-nav li{width:100%;p osition:relative; right:200%;}

As follows:
Examples are relatively simple, but often the simpler the more things need to go down to practice and experience, life has been so, mutual encouragement.   

Author: Zhi Zhi
Sign: The road long its repair far XI, I will go up and down and quest.
"CSS" pure CSS Implementation level three navigation (template)