纵向导航菜单及二级弹出菜单-Web标准(div+css)教程

敖游

2016-03-06

来源：遨游建站

　　二级菜单即指当鼠标放到一级菜单上后，会弹出相应的二级菜单，移去鼠标后自动消失，我们接着上边的例子进行修改，代码如下：

　　<ul>

　　<li><a href="#">网页版式布局</a>

　　<ul>

　　<li><a href="#">自适应宽度</a></li>

　　</ul>

　　</li>

　　<li><a href="#">div+css教程</a>

　　<ul>

　　</ul>

　　</li>

　　<li><a href="#">div+css实例</a></li>

　　</ul>

　　</div>

　　接下来修改css样式表，先修改#menu ul li，给其增加一个 position:relative;属性

　　然后定义ID为menu下ul下里内的ul样式如下：

　　定义display:none后，默认状态下将隐藏

　　定义#menu ul li ul的position: absolute; left: 100px; top: 0px;，那么它将以相对于它父元素li的上为0，左为100的位置显示。最后我们设置当鼠标划过后显示下级菜单的样式

　　#menu ul li:hover ul这个样式比较难理解，它的意思是定义ID为menu下ul下li，当鼠标划过时ul的样式，这里设置为display:block，指的是鼠标划过时显示这块内容，这也实现我们今天想要的效果。其中的:hover和前边说的链接一样，同属于伪类，但有一点注意，目前IE6只支持a的伪类，其它标签的伪类不支持，所以要想在IE6下也显示正确，需要借助js来实现，我们定义一个类.current （自己命名，需和JS中相同）的属性为display:block;然后当鼠标划过后，用JS给当前li添加上这个样式上，根据css的优先级：指定的高于继承的原则，就实现了IE6下的正确显示。所以需要加上JS和样式#menu ul li.current ul { display:block;}。

　　#menu ul li.current ul { display:block;}

　　<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

　　<head>

<script type="text/javascript"><![CDATA[//><!--

　　startList = function() {

　　if (document.all&&document.getElementById) {

　　navRoot = document.getElementById("menu");

　　var allli = navRoot.getElementsByTagName("li")

　　for (i=0; i<allli.length; i++) {

　　node = allli[i];

　　node.onmouseover=function() {

　　this.className+=" current";

　　}

　　node.onmouseout=function() {

　　this.className=this.className.replace(" current", "");

　　}

　　window.onload=startList;

　　//--><!]]></script>

　　body { font-family: Verdana; font-size: 12px; line-height: 1.5; }

　　img { border-style: none; }

　　a { color: #000; text-decoration: none; }

　　a:hover { color: #F00; }

　　#menu { width: 100px; border: 1px solid #CCC; border-bottom:none;}

　　#menu ul { list-style: none; margin: 0px; padding: 0px; }

　　#menu ul li { background: #eee; padding: 0px 8px; height: 26px; line-height: 26px; border-bottom: 1px solid #CCC; position:relative; }

　　#menu ul li ul { display:none; position: absolute; left: 100px; top: 0px; width:100px; border:1px solid #ccc; border-bottom:none; }

　　#menu ul li.current ul { display:block;}

　　#menu ul li:hover ul { display:block;}

　　</style>

　　</head>

　　<body>

　　<ul>

　　<li><a href="#">网页版式布局</a>

　　<ul>

　　<li><a href="#">自适应宽度</a></li>

　　</ul>

　　</li>

　　<li><a href="#">div+css教程</a>

　　<ul>

　　</ul>

　　</li>

　　<li><a href="#">div+css实例</a></li>

　　</ul>

　　</div>

　　</body>

　　</html>

　　最终显示效果如下：

　　上节课讲解块级元素和内联元素时提到display，今天用到了display:block;和display:none;值为none时表示将这个元素隐藏，为block时表示将它的隐藏状态改为显示状态详细介绍请参考css手册

　　六、相对定位和绝对定位

　　§ 定位标签：position

　　§ 包含属性：relative（相对） absolute（绝对）

　　1.position:relative; 如果对一个元素进行相对定位，首先它将出现在它所在的位置上。然后通过设置垂直或水平位置，让这个元素"相对于"它的原始起点进行移动。（再一点，相对定位时，无论是否进行移动，元素仍然占据原来的空间。因此，移动元素会导致它覆盖其他框）

　　2.position:absolute; 表示绝对定位，位置将依据浏览器左上角开始计算。绝对定位使元素脱离文档流，因此不占据空间。普通文档流中元素的布局就像绝对定位的元素不存在时一样。（因为绝对定位的框与文档流无关，所以它们可以覆盖页面上的其他元素并可以通过z-index来控制它层级次序。z-index的值越高，它显示的越在上层。）

　　3.父容器使用相对定位，子元素使用绝对定位后，这样子元素的位置不再相对于浏览器左上角，而是相对于父窗口左上角

　　4.相对定位和绝对定位需要配合top、right、bottom、left使用来定位具体位置，这四个属性只有在该元素使用定位后才生效，其它情况下无效。另外这四个属性同时只能使用相邻的两个，不能即使用上又使用下，或即使用左，又使用右

　　文章出处：标准之路编辑：杨雨晨思

3 / 3

企业网站建设

阅读原文

阅读440

下一篇：超链接伪类-Web标准(div+css)教程

上一篇：二列和三列布局-Web标准(div+css)教程

写评论...