CSS webpage layout tutorial 14: vertical drop-down and multi-level pop-up menus

After learning the previous tutorial, I think it is much easier to learn this lesson.
The horizontal menu is implemented through div and JavaSprict drop-down control. What about the vertical menu? The answer is yes. What we need to do now is a vertical menu, css code:

Ul {margin: 0; padding: 0; list-style: none; width: 120px; border-bottom: 1px solid # ccc; font-size: 12px ;}
Ul li {position: relative ;}
Li ul {position: absolute; left: 119px; top: 0; display: none ;}
Ul li a {width: pixel PX; display: block; text-decoration: none; color: #666666; background: # fff; padding: 5px; border: 1px solid # ccc; border-bottom: 0px ;}
Ul li a: hover {background-color: # ddd ;}
/* Solve the problem that ul is incorrectly displayed under IE */
* Html ul li {float: left; height: 1% ;}
* Html ul li a {height: 1% ;}
/* End */
Li: hover ul, li. over ul {display: block ;}

The css code is basically written in the same way as the horizontal navigation. The difference is that in order to realize the interaction between the navigation and the main navigation while implementing the mouse interaction, to keep the relative positions consistent, we use position: relative for ul li {} to convert the positioning method to relative positioning. The position: absolute is used for the li ul {} sub-navigation, which is consistent with the position after the mouse interaction compared with the absolute positioning method of the navigation.
You may have discovered that the css code has added a comment definition * html ul li and * html ul li. CSS hack is used here, because different browsers parse different codes and use it to display the same effect on each browser. This code can only be parsed by IE, and other browsers will turn a blind eye to it.
The final result of this example is as follows:Xmlns = "http://www.w3.org/1999/xhtml">

• Article
  • CSS tutorial
  • DOM tutorial
  • XML tutorial
  • FLASH tutorial
• Reference
  • XHTML
  • XML
  • CSS
• BLOG
  • All
  • Web technology
  • UI Technology
  • FLASH technology
• Rock
• Pure music
• Classical jinqu
• Original Movie sound