Web Standards (review)--8

Today we start learning the dropdown and multi-level pop-up menus that contain the following and knowledge points:

Navigation menu with pull-down submenu
The difference and application of absolute positioning and floating
CSS Adaptive width sliding door Menu
First, the navigation menu with the dropdown submenu
Drop-down menu in some enterprise website application is particularly extensive, it is easy to use, occupy small space and other characteristics. Before the vertical navigation tutorial has used the level two navigation, today to make the horizontal navigation menu of the level two menu, the same way as the portrait, only from the vertical change to horizontal only, the following chapter of our second section of the picture beautification of the landscape of the example to modify.

<! DOCTYPE HTML Public"-//W3C//DTD XHTML 1.0 transitional//en" "HTTP://WWW.W3.ORG/TR/XHTML1/DTD/XHTML1-TRANSITIONAL.DTD">"http://www.w3.org/1999/xhtml">"Content-type"Content="text/html; charset=gb2312"/><script type=text/javascript><!--//--><! [Cdata[//><!--function Menufix () {varSfels = document.getElementById ("Menu"). getElementsByTagName ("Li"); for(varI=0; i<sfels.length; i++) {Sfels[i].onmouseover=function () { This. classname+= ( This.classname.length>0?" ":"") +"Sfhover";} Sfels[i].onmousedown=function () { This. classname+= ( This.classname.length>0?" ":"") +"Sfhover";} Sfels[i].onmouseup=function () { This. classname+= ( This.classname.length>0?" ":"") +"Sfhover";} Sfels[i].onmouseout=function () { This. classname= This. Classname.replace (NewREGEXP ("( ?| ^) sfhover\\b"), "");}}} Window.onload=Menufix;//--><!]] ></script><style type="Text/css">Body {font-family:verdana; font-size:12px; Line-height:1.5; } A {color: # the; text-Decoration:none;} a:hover {color: #F00;} #menu {width:500px; height:28px; margin:0Auto border-bottom:3px solid #E10001;} #menu ul {List-style:none; margin:0px; padding:0px;} #menu ul li {float: Left; margin-left:2px;} #menu ul Li a {display:block; width:87px; height:28px ; line-height:28px; Text-align:center; Background:url (images/ .- ./ -/nav_bg2.gif)0 0No-repeat; font-size:14px;} #menu ul li a:hover {background:url (Images/ .- ./ -/nav_bg3.gif)0 0no-repeat;} #menu ul Li A#current {background:url (Images/ .- ./ -/nav_bg1.gif)0 0No-repeat; font-weight:bold; color: #fff;} #menu ul Li ul {border:1px solid #ccc; display:none; position:absolute;} #menu ul Li ul li {float: none; width:87px; Background: #eee; Margin0;} #menu ul Li ul li a {background:none;} #menu ul Li ul li a:hover {background:#333; color: #fff;} #menu UL Li:hover ul {display:block;} #menu UL Li.sfhover ul {display:block;}</style>"Menu"><ul><li><a id=" Current"href="#"> Home </a></li><li><a href="#"> Page Layout </a><ul><li><a href="#"> Adaptive Width </a></li><li><a href="#"> Fixed width </a></li></ul></li><li><a href="#">web Tutorial </a><ul><li><a href="#"> Beginner </a></li><li><a href="#"> Video Tutorials </a></li><li><a href="#"> FAQ </a></li></ul></li><li><a href="#">web instance </a></li><li><a href="#"> Common Code </a></li></ul></div></body>

Ii. the difference and application of absolute positioning and floating
Learning to the present, positioning and floating are also involved, but some friends may still be confused, both can be divided into column layout, in the end when used floating, when to use positioning it?

When an element uses absolute positioning, its position is calculated based on the upper-left corner of the browser or relative to the parent container (when relative positioning is used in the parent container). Absolute positioning keeps elements out of the document flow and therefore does not occupy space. The layout of elements in a normal document flow is the same as when an absolutely positioned element does not exist. Because absolutely positioned boxes are independent of the document flow, they can overwrite other elements on the page.

The positioning of the floating element is based on the normal flow of the document, which is then drawn from the document stream and moved as far as possible to the left or right. The text content surrounds the floating element. When an element is extracted from the normal document stream, the other elements still in the document flow will ignore the element and fill his original space. It just changes the display of the document flow, not out of the flow of the document, understanding this, it is easy to figure out when to use positioning, when used to float.