CSS web page layout introductory tutorial 14: Vertical drop-down and multi-level pop-up menu_Basic tutorial

After finishing the previous tutorial, I think it will be much easier to learn this section.
The horizontal menu implements drop-down control through div and JavaStrict. 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: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;}
/*Solve the problem of incorrect display of ul 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 writing of css code basically maintains the horizontal direction The same idea is used for navigation, but the difference is that in order to achieve mouse interaction between the navigation and the main navigation while maintaining their relative positions, we use position:relative; for ul li{} to make it positioning. Convert to relative positioning. For li ul{}, that is, the sub-navigation uses position:absolute; the absolute positioning method relative to the navigation makes its position consistent after mouse interaction.
Perhaps you have noticed that a comment definition * html ul li and * html ul li a has been added at the end of the css code. The CSS hack used here is because different browsers parse the code differently and is used to achieve the same effect on each browser. This code can only be parsed by the IE browser, and other browsers will turn a blind eye.
The final display effect of this example is as follows:

<meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>Drop-down vertical and multi-level pop-up menu www.aa25.cn</title> <script type="text/javascript"><!--//--><![CDATA[//><!-- startList = function() { if (document.all&&document.getElementById) { navRoot = document.getElementById("nav"); for (i=0; i<navRoot.childNodes.length; i++) { node = navRoot.childNodes[i]; if (node.nodeName=="LI") { node.onmouseover=function() { this.className+=" over"; } node.onmouseout=function() { this.className=this.className.replace(" over", ""); } } } } } window.onload=startList; //--><!]]></script><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: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 of incorrect display of ul under IE 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> <ul id="nav"> <li> <a href="">Article</a> <ul> <li><a href="">CSS tutorial</a></li> <li><a href="">DOM Tutorial</a></li> <li><a href="">XML Tutorial</a></li> <li><a href="">FLASH tutorial</a></li> </ul> </li> <li> <a href="">Reference</a> <ul> <li><a href="">XHTML</a></li> <li><a href="">XML</a></li> <li><a href="">CSS</a></li> </ul> </li> <li> <a href="">BLOG</a> <ul> <li><a href="">All</a></li> <li><a href="">Web technology</a></li> <li><a href="">UI technology</a></li> <li><a href="">FLASH technology</a></li> </ul> </li> <li><a href="">Rock</a></li> <li><a href="">Pure music</a></li> <li><a href="">Classical hits</a></li> <li><a href="">Movie Soundtrack</a></li> </ul>
[Ctrl A Select all Note:If you need to introduce external Js, you need to refresh it to execute]