<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>下拉纵向及多级弹出式菜单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;}
/*解决ul在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>
</head>
<body>
<ul id="nav">
<li><a href="">文章</a>
<ul>
<li><a href="">CSS教程</a></li>
<li><a href="">DOM教程</a></li>
<li><a href="">XML教程</a></li>
<li><a href="">FLASH教程</a></li>
</ul>
</li>
<li><a href="">参考</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="">全部</a></li>
<li><a href="">网页技术</a></li>
<li><a href="">UI技术</a></li>
<li><a href="">FLASH技术</a></li>
</ul>
</li>
<li><a href="">摇滚</a></li>
<li><a href="">纯音乐</a></li>
<li><a href="">古典金曲</a></li>
<li><a href="">电影原声</a></li>
</ul>
</body>
</html>
为了实现导航中的子导航与主导航在实现鼠标交互的同时,保持其相对位置一致,我们使用了对ul li{}使用了position:relative;使其定位方式转为相对定位。而对li ul{}即子导航采用了position:absolute;相对于导航的绝对定位方式,了其鼠标交互后的位置一致。
里边加上了和段js代码,它是用来控制在IE浏览器下显示下拉菜单的,本来li:hover ul这句是可以的,但IE对css的支持还还完善,所以需要借助JS来控制。
分享到:
相关推荐
CSS网页布局入门教程14:纵向下拉及多级弹出式菜单
纵向导航菜单及二级弹出菜单的CSS代码。直接看html上面的style标签。
mootools版无限级纵向下拉菜单 mootools版无限级纵向下拉菜单 mootools版无限级纵向下拉菜单
最简单的纯css,2级纵向下拉菜单。不会js的也可以用哦!
基于jQuery的横向、纵向下拉菜单,支持五级,其实这已经够用了,横向和竖向都有了,方便大家的调用,效果如上示,jQuery加入后,菜单下拉更平滑了,也希望jQuery爱好者认真仔细参考代码,扩展出更强大的功能来。
JQuery实现横、纵向无限下拉式菜单 源代码
jquery实现一个风格简洁的多级水平展开、垂直下拉的网站菜单,基于jQuery的横向展开/纵向下拉菜单代码,Js下拉菜单代码。页面里一共包括了两款菜单,一款是标准的横向排列菜单,鼠标放在菜单项上时,菜单会向下滑出二...
纯CSS打造的下拉菜单纵向实例,可直接运行,如果浏览器提示要加载ActiveX控件,则加载
jQuery横向纵向下拉菜单特效,愿意与大家分享我的成果,不过还有不足之处,愿意继续研究!
一款js纵向多级菜单 主要是css和js配合显示,效果不错
JS 纵向弹出菜单效果(很漂亮哦)
jQuery橙色纵向下拉导航 jQuery橙色纵向下拉导航网页特效.zip
DIV+CSS纵向横向下拉菜单,JS图片文字横向滚动,比较实用小例子,和大家分享下!
主要介绍了jQuery实现的纵向下拉菜单,结合实例形式分析了jQuery动态操作页面元素实现纵向下拉菜单的步骤与相关实现技巧,需要的朋友可以参考下
纵向多级导航菜单代码.zip
第一天 XHTML CSS基础...第八天 下拉及多级弹出菜单 第九天 CSS表单设计 第十天 div+css网页标准布局实例教程(一) 第十天 div+css网页标准布局实例教程(二) 第十天 div+css网页标准布局实例教程(三)
今天我们要来分享一款jQuery纵向分类菜单,这款jQuery菜单是下拉菜单,鼠标滑过菜单项时即可展开相应的子菜单,并伴随很酷的淡入淡出和滑块动画效果。当鼠标滑过菜单项时,菜单项的背景颜色也会有渐变的效果。
一个纵向下拉菜单~而二级菜单,可以增加到多级,灰色,只展开一个,其他默认收回
第八天 下拉及多级弹出菜单 第九天 CSS表单设计 第十天 div+css网页标准布局实例教程(一) 第十天 div+css网页标准布局实例教程(二) 第十天 div+css网页标准布局实例教程(三) 来自:http://www.aa25.cn/
div+css 纵向三级导航菜单 html代码