After finishing the last tutorial, I think it is much easier to learn this in this section.
The horizontal menu is the drop-down control via div and javasprict, vertical menu? The answer is yes. What we're going to do now is a portrait 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:108px; 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;}
/* Resolve the issue of UL under IE incorrect display */
* HTML ul li {float:left; height:1%;}
* HTML ul li a {height:1%;}
/* END */
Li:hover Ul,li.over ul {display:block;}
CSS code is basically maintained with the same idea of horizontal navigation, the difference is that in order to achieve navigation and the main navigation in the implementation of mouse interaction, while maintaining its relative position consistent, we used the UL li{} used position:relative; To the relative positioning of the positioning method. The position:absolute of the Li ul{} is the sub-navigation, and the position of the mouse interaction is consistent with the absolute position of the navigation.
Perhaps you have found that here in the CSS code has not been added to the definition of a note * HTML UL li with * html ul li A. CSS hack is used here because different browsers have different parsing of the code, which is used to show the same effect on each browser. Only IE browser can parse this code, other browsers ignore.
The final display of this example is as follows:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> <ptml xmlns=" http://www.w3.org/1999/xhtml "> <pead> <meta http-equiv=" Content-type "content=" text/html; charset=gb2312 "/> <title> dropdown vertical and Multilevel pop-up menu www.aa25.cn</title> <style> 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:108px; display:bl Ock; Text-decoration:none; Color: #666666; Background: #fff; padding:5px; border:1px solid #ccc; border-bottom:0px;} UL li a:hover {background-color: #ddd;}/* Resolve UL under IE display incorrect problem aa25.cn*/* html ul li {float:left; height:1%;} * HTML ul li a {height:1%;} /* End */Li:hover ul,li.over ul {display:block;} </style> </pead> <body> <ul id= "NAV" > <l I> Articles <ul> <li>css Tutorials </li> <li>dom Tutorials </li> <li>xml Tutorials </li> <li>flash Tutorials </li> </ul> </li> <li> Reference <ul> <li>XHTML</li> < li>xml</li> <li>CSS</li> </ul> </li> <li>blog & lt;ul> <li> all </li> <li> Web technologies </li> <li>ui Technology </li> <li>flash technology </li> </ul> </li> <li> rock </li> <li> Pure Music </li> <li> Classic Hits </li> <li> movie soundtrack </li> </ul> </body> </ptml>
[Ctrl + A full selection Note: If you need to introduce external JS need to refresh to execute]
