Sample Code of the second-level drop-down menu implemented by pure CSS, And the css navigation menu

Sample Code of the second-level drop-down menu implemented by pure CSS, And the css navigation menu

Sample Code of the second-level drop-down menu implemented by pure CSS:
The level-2 drop-down menu is applied to many websites. It not only effectively organizes classified navigation, but also saves a lot of website space and achieves dynamic website effects, most level-2 navigation menus are implemented with javascript. This section describes the drop-down menus implemented with pure css.
The Code is as follows:

 

<! DOCTYPE html> 
 
The above Code meets our requirements, and uses pure css to implement the drop-down navigation menu effect. In earlier versions of IE browsers, there are compatibility issues, but you don't have to worry about it, because you don't have to worry about it soon, there will be fewer and fewer IE6 users. The following briefly introduces its implementation principles.
Implementation principle:
1. horizontal arrangement of the main navigation:
The horizontal arrangement effect of the main navigation is very simple, as long as the outermost li element is added to the floating.
2. Core Structure:
 
<Li> <a> ant tribe </a> <ul> <li> <a href = "#"> div css tutorial </a> </li> <li> <a href = "#"> javascript tutorial </a> </li> <a href = "#"> jQuery tutorial </a> </li> <li> <a href = "#"> html tutorial </a> </li> <a href = "#"> json tutorial </a> </li> <li> <a href = "#"> ajax tutorial </a> </li> </ul> </li>
 
By default, the ul element in the inner layer is hidden, that is, only the main navigation is displayed by default, when the mouse is hovering over the main navigation, the ul element in the inner layer is displayed and set to absolute positioning. Meanwhile, the left and top attribute values are adjusted to achieve the drop-down menu effect.
The original address is: http://www.softwhy.com/forum.php? Mod = viewthread & tid = 12909.
For more information, see: http://www.softwhy.com/divcss/