CSS网页布局入门教程14：纵向下拉及多级弹出式菜单
作者:不详 来源:aa25收集 【大 中 小】 浏览: 修改日期：2008-06-17 我要评论(22)
学完了上节教程，我想对于这于这节的学习就容易得多了。
横向菜单是通过div及JavaSprict实现下拉控制，纵向菜单呢？答案是肯定的。我们现在要做的就是一个纵向菜单，css代码：
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下显示不正确的问题*/
* html ul li { float:left; height:1%;}
* html ul li a { height:1%;}
/* end */
li:hover ul,li.over ul { display:block;}
css代码的编写基本上保持了与横向导航相同的思路，不同的是，为了实现导航中的子导航与主导航在实现鼠标交互的同时，保持其相对位置一致，我们使用了对ul li{}使用了position:relative;使其定位方式转为相对定位。而对li ul{}即子导航采用了position:absolute;相对于导航的绝对定位方式，了其鼠标交互后的位置一致。
也许您已经发现，这里在css代码未尾增加了一段注释的定义* html ul li 与* html ul li a。这里用到的是CSS hack，这是因为不同的浏览器对代码的解析不同，用来实现在各浏览器上显示相同的效果而使用的。这段代码只有IE浏览器能解析，其它浏览器视而不见。有关css hack的更多教程，请在www.aa25.cn网站内查找。
本例的最终显示效果如下：
标准之路www.aa25.cn 提示：可以先修改部分代码后再运行
〖DIV+CSS教程〗Tags: 菜单 CSS 教程
所属专题：入门教程
相关文章
更多评论(22)..会员评论
- xsz89732118(119.119.*.*) 发表于：2010-09-03 09:45:29
- 为什么这一节的纵向导航菜单和上一节的横向导航菜单代码放一起，不能让这俩个菜单同时在一个页面中啊，总有一个不好用。ID和js也修改了啊，为什么呢？
- 管理员回复：这些教程有点老，最新的请参看十天学会web标准中相关教程
- joefoe(220.191.*.*) 发表于：2010-07-15 14:44:43
- 我为什么不写那断JS代码在IE下也能正常显示呢，我的是IE8
- 管理员回复：嗯
- liliyuanyang(113.64.*.*) 发表于：2010-07-12 20:21:59
- *html ul li{ float:left; height:1%;} *html ul li a{ height:1%;} 管管，这两句是CSS hack 能详细解释一下吗?
- 管理员回复：css hack没什么好解释，它本身就是利用软件的错误来纠正它的错误，只要你知道这种方法是兼容哪个浏览器就行了
- huangzudan(222.133.*.*) 发表于：2010-05-22 19:05:01
- 管理员你好： if (node.nodeName=="LI") { node.onmouseover=function() { this.className+=" over"; } 在这个中的IF中，node.nodeName=="LI"，这是有什么作用呢，怎么会有个“LI”？
- 管理员回复：针对li
- naohloveqi(117.79.*.*) 发表于：2010-05-05 21:06:56
- 管理员你好。截止目前火狐狸浏览器无法留言。我这是在IE离留的。问个问题，您首页上面那六张动态图片，是怎么实现的？这个叫什么名字。您这里有教程吗？说是js吧，我看了您的网站，没找到相关教程。我想去其他地方搜索，学习一下，又不知道搜索什么关键词。请解释一下，非常感谢。
- 管理员回复：你看下源代码，很简单的，一个swf播放图片功能；目前支持火狐下评论呀，能否详细描述下不能评论的原因？
- maoyu(61.164.*.*) 发表于：2010-04-30 11:04:57
- 为什么必须要加个nav才可以显示出下拉菜单，而style里面根本没有#nav
- 管理员回复：js里用
- zhaohuikt(124.225.*.*) 发表于：2010-04-17 22:24:22
- 发现个问题，下拉菜单总是被底下的div标签引用的背景图片挡住，怎么解决？
- 管理员回复：背景图片不会挡住元素的
- oushoulong(61.142.*.*) 发表于：2010-03-29 15:30:14
- 要是只设置上边的话最下面的那个边框就没有啦,或者只设置下边的话最上面的那个边框也会是0象素,真是郁闷!
- 管理员回复：你设置父元素的下边框不就行了吗
最新图片素材
最新评论文章
推荐专题
在线交流QQ群
- 44051756(开)
- 74816202(开)
- 75782368(开)
- 54187042(开)
- 102426914(开)
- 87010869(开)
- 71571195(开)
- 35826206(开)
- 40334594(开)
- 102050535(开)
- 105366319(开)
- 106872711(开)
- 61729892(开)
- 100154872(开)
- 61729892(开)
- 38473554(开)