第9课 下拉菜单
除了前面介绍的竖直排列和水平排列的菜单,使用CSS还可以制作出很好的多级菜单效果。这列给出一个案例,制作一个两级的下拉菜单。鼠标指针经过主菜单的时候,会自动打开子菜单。
本节课时长15分51秒,下载文件26.6兆字节。下载的视频文件为FLV格式,推荐使用“Riva Flv Player”软件播放,点击这里下载。
以下为本课的讲义,供大家参考。
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() 了解详细说明 |
除了前面介绍的竖直排列和水平排列的菜单,使用CSS还可以制作出很好的多级菜单效果。这列给出一个案例,制作一个两级的下拉菜单。鼠标指针经过主菜单的时候,会自动打开子菜单。
本节课时长15分51秒,下载文件26.6兆字节。下载的视频文件为FLV格式,推荐使用“Riva Flv Player”软件播放,点击这里下载。
以下为本课的讲义,供大家参考。
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
这篇文章发表于 2007年12月05日 星期三 7:00 am,并被分类于CSS导航设计。 您可以通过订阅 RSS 2.0 跟踪对这篇文章的评论。 您可以对这篇文章发表一条评论,或者在您自己的网站中引用 (Trackback) 它。
前沿视频教室的内容版权属于北京前沿科技,http://www.artech.cn。Copyright 2006-2011
本网站使用了 WordPress
2.2
中文版 。










我买了一本CSS设计彻底研究,正在学习!!!!!!www.weihaiseo.com
[…] CSS导航设计 第6 课 链接与导航 第 7课 竖直菜单(上) 第 7课 竖直菜单(下) 第 8课 水平菜单 第 9课 下拉菜单 […]
I鈥檝e bookmarked, Dugg, and I joined the RSS subscription. Thanks!
在页面中下拉菜单被视频控件挡住了,页面中视频控件是放在属性中的。代码如:
希望高手帮我解决一下,谢谢!!
温老师,我的ftp密码丢了,
这本教程真的优秀!
这里我想请教一下如何用纯CSS做竖状右出菜单?
这个支持IE8吗? 我在IE8里运行. 下拉菜单只闪一下就没有了
这个视频很好,谢谢站长。 我有点地方不明白,兼容ie6为什么要嵌套, 嵌套不行吗。
还有就是为什么要加 li a:hover { border:0}。 不加又兼容不了ie6
[…] CSS导航设计 第6 课 链接与导航 第 7课 竖直菜单(上) 第 7课 竖直菜单(下) 第 8课 水平菜单 第 9课 下拉菜单 […]
能不能在每个例子的视屏下面,有一个这个例子的源文件下载呢?这样的话对于我们的学习也是有帮助的!
我在dd中加入div,想实现更宽的菜单效果,但是不设置div定位时,鼠标经过时dt会变宽,把其他dt挤出去了,设置div为absolute定位时,鼠标离开div不会消失,不知道该如何解决呢?
楼主讲的非常的好,前沿教室教会了我很多,你们真的辛苦了,再次感谢,谢谢你们无私的奉献。
谢谢你的教程
非常感谢提供,很不错的教程,推荐
litao,
谢谢您的鼓励!欢迎常来这里交流!
第九章的下拉菜单,
当菜单下拉时会把后面的内容挤开,而不是通常的覆盖上去,这是怎么回事呢
canyoneer ,
你可以把整个菜单放到一个div中,然后对这个div使用绝对定位,这样这个div就飘浮在其他内容的上面了,不会把后面的内容顶下去。
但是这样一来,在IE6和IE8等不同的浏览器中,导航条开始乱跑了(偏左、偏右)的。
还有别的解决方案吗?
anna ,
这个应该是浏览器的兼容问题了,用CSS总会遇到各种浏览器兼容问题,可以参考一下
http://learning.artech.cn/20090703.selected-faq.html 。
里面列了几篇关于浏览器兼容的问题,从您参考。
请问一下,你说下拉菜单那一课,我用table方法,怎么在IE7,IE8上面显示很快,不知道在IE6上显示怎么样,请问一下怎么让他慢点显示。我知道IE7,IE8可以直接用哪种方法。
张海鹏,
我没看明白你的问题,如果你希望菜单展开或者关闭的速度变慢,就好象是有个动画效果,慢慢打开/关闭,那么用CSS是不可能实现的,可以用JS/jQeury来配合才有可能的。
你说的IE6是什么意思?
哦 谢谢啊,IE6是浏览器啊。
这里很不错..thanks 站长
mrhan ,
谢谢您的鼓励!
抱歉没有及时回复,我们最近很忙,下半年我们会拿出更多时间增加新内容的,欢迎来交流!
看到第九课,是我见过的最好的视频教材了,受益灰浅,灰常感谢。这个下拉菜单我在IE7和IE8下测试不能实现(IE6可以),请问老师是不是加 table 的方法在在IE7.8不管用?有其他办法吗?
cambrian ,
IE7/8 不需要用使用这种方法了,他们直接支持任意对象的:hover伪类了。
抱歉没有及时回复,我们最近很忙,下半年我们会拿出更多时间增加新内容的,欢迎来交流!
这个网站太好了。我已经买了两本关于css书。感谢站长发这么详细的视频。
小妖,
加油!谢谢你喜欢我们的网站!欢迎常来这里交流!
不知道我的代码错在那里?
你好,
这里留言不能发代码,如果需要讨论代码问题,请到论坛:
http://talking.artech.cn/thread-178-1-1.html
好像没有第8课啊?
cxn841204,
你好,第8课在这里:
http://learning.artech.cn/20071204.research-css-horizontal-navi.html
下拉菜单这篇最后一步实现不了啊
IE6实现不了用你讲的方法也不起作用,我是在DW里面操作那a包含在表格外面不起作用。
静,
可以实现的,不过我一下子很难说清你具体的问题在哪里,不过肯定是可以的。加油!
谢谢!我会加油的!
第九课,我点下载,看不了。提示为“Parse error: syntax error, unexpected T_STRING in /home/chancewe/artechtv/video/dl.php on line 140”
晨,
您再试试看,应该没问题了。
这个真是太好了,基本的导航设计都可以解决了。很方便!
希望对您的工作有所帮助!欢迎常来这里交流!
我已经看到这了!还是挺不错的,以前都是拿别人的例子分析,一点点的修改来测试变化,有了一定的基础.看了这个知道了更多的细节.赞!
sl618,
您说的对,学习基础的原理和实践相结合,学习的效率最高。
站长真好
yanick,
谢谢鼓励,欢迎常来交流吧!