二级弹出菜单.ppt

二级弹出菜单 —— 纵向二级列表 纵向列表 纵向二级列表 二级菜单即指当鼠标放到一级菜单上后，会弹出相应的二级菜单，移去鼠标后自动消失 插入二级列表的内容 lia href=#网页版式布局/a ul lia href=#自适应宽度/a/li lia href=#固定宽度/a/li /ul /li #menu ul li，给其增加一个 position:relative;属性 position:relative; 如果对一个元素进行相对定位，首先它将出现在它所在的位置上。然后通过设置垂直或水平位置，让这个元素“相对于”它的原始起点进行移动。 再一点，相对定位时，无论是否进行移动，元素仍然占据原来的空间。因此，移动元素会导致它覆盖其他框 相对定位和绝对定位 定位标签：position 包含属性：relative（相对） absolute（绝对） position:absolute; 表示绝对定位，位置将依据浏览器左上角开始计算。 绝对定位使元素脱离文档流，因此不占据空间。普通文档流中元素的布局就像绝对定位的元素不存在时一样。（因为绝对定位的框与文档流无关，所以它们可以覆盖页面上的其他元素并可以通过z-index来控制它层级次序。z-index的值越高，它显示的越在上层。） 相对定位和绝对定位需要配合top、right、bottom、left使用来定位具体位置，这四个属性只有在该元素使用定位后才生效，其它情况下无效。另外这四个属性同时只能使用相邻的两个，不能即使用上又使用下，或即使用左，又使用右 定义ID为menu下ul下里内的ul样式 #menu ul li ul { display:none; position: absolute; left: 100px; top: 0px; width:100px; border:1px solid #ccc; border-bottom:none; } 定义display:none后，默认状态下将隐藏 定义#menu ul li ul的position: absolute; left: 100px; top: 0px;，那么它将以相对于它父元素li的上为0，左为100的位置显示。 父容器使用相对定位，子元素使用绝对定位后，这样子元素的位置不再相对于浏览器左上角，而是相对于父窗口左上角 设置当鼠标划过后显示下级菜单的样式 #menu ul li:hover ul {display:block;} 定义ID为menu下ul下li，当鼠标划过时ul的样式，设置为display:block，指的是鼠标划过时显示这块内容 IE6 IE6只支持a的伪类，其它标签的伪类不支持。 借助js实现 定义一个类.current 的属性为display:block; 当鼠标划过后，用JS给当前li添加上这个样式上，根据css的优先级：指定的高于继承的原则，就实现了IE6下的正确显示。 需要加上JS和样式#menu ul li.current ul { display:block;}。 js script type=text/javascript!--//--![CDATA[//!-- startList = function() { if (document.alldocument.getElementById) { navRoot = document.getElementById(menu); var allli = navRoot.getElementsByTagName(li) for (i=0; iallli.length; i++) { node = allli[i]; node.onmouseover=function() { this.className+= current; } node.onmouseout=function() { this.className=this.className.replace( current, ); } } } } window.onload=startList; //--!]]/script JS内部调用 JavaScript 可以出现在 HTML 的任意地方。使用标记script…/script，你可以在 HTML 文档的任意地方插入 JavaScript script!--...(JavaScript代码)...//--/script !-- -- 让不懂script标记的浏览器忽略 JavaScript 代码（可以省略 ） 双反斜杠“//”是 JavaScript 里的注释标号 JS外部调用 把 JavaScript 代码写到 “.js”文件中 script language=javascript src