当前位置:首页 > DIV+CSS教程 > 正文

CSS网页布局入门教程14:纵向下拉及多级弹出式菜单

作者:不详 来源:aa25收集 【 】 浏览: 修改日期:2008-06-17 我要评论(25)     

本站2010年9月新增《十天学会web标准(div+css)》系列教程,欢迎学习!

学完了上节教程,我想对于这于这节的学习就容易得多了。
横向菜单是通过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 教程

所属专题:入门教程

更多评论(25)..会员评论

zhongfufen(183.12.*.*) 发表于:2012-09-25 14:13:22
为什么IE6下没用?下拉菜单出不来~
zhongfufen(183.12.*.*) 发表于:2012-09-25 14:12:25
为什么IE6下没用?下拉出不来~
管理员回复:可以出来的 你是不是什么地方搞错了
hn580231(123.52.*.*) 发表于:2011-07-28 09:21:29
站长,我做了个SEO方面的 博客,想转载 你站的内容 可以把
管理员回复:可以,请保留来源
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播放图片功能;目前支持火狐下评论呀,能否详细描述下不能评论的原因?

出差旅游免费预订酒店

【视频教程】新手常见问题