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

共有 23 位网友发表了评论　我要评论..

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播放图片功能；目前支持火狐下评论呀，能否详细描述下不能评论的原因？

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象素,真是郁闷!

管理员回复：你设置父元素的下边框不就行了吗

oushoulong(61.142.*.*) 发表于：2010-03-29 15:21:08

这一节我做了后基本上没问题，可是就是每个菜单之间的border合起来有两个象素。（上面菜单的border有1个象素，下面菜单的也有1个象素，合起来2个象素）我用border－collapse：collapse也不能把它们合成1个象素，怎么办啊？

管理员回复：只设置上边或只设置下边不就成一个像素了

vbc(125.112.*.*) 发表于：2010-02-20 15:53:39

什么时候应该用ul+li...什么时候应该用h1，h2，h3..呢？怎么判断呢？

管理员回复：列表用li，标题一般用h类

meuweb(115.148.*.*) 发表于：2010-01-05 16:51:10

请问 怎么实现多级目录啊？ 嵌入进去后 鼠标移到上面全部都出来了啊 www.menuweb.cn/1.html 能不能一步一步的出来啊

管理员回复：那就需要设置个鼠标移出隐藏的事件

瓜子(119.161.*.*) 发表于：2009-08-19 22:34:52

我想问一个关于不是本节内容的问题，在ie6中怎么去掉png格式的背景呢？

管理员回复：本站有关png在ie6下透明的问题有几篇文章提供解决方案，你可以搜索一下

Guest(61.140.*.*) 发表于：2009-06-29 11:39:51

请问：width:108px是怎么样算出来的呢？？谢谢

管理员回复：因为ul的宽度为120px，那么a的宽度＝120减去两边的1px边框，再送出两边的padding值5px。所以为120px-1px-5px-5px-1px;这样得出来的。建议你再熟悉一下盒模型结构，在本站的css网站布局实例频道下边有详细的盒模型图

阎雨枫(58.44.*.*) 发表于：2009-06-18 16:55:03

站长你好，* html ul li { float:left; height:1%;}* html ul li a { height:1%;}在ie7下这句代码好像也不能解决ul显示不正常的问题？

管理员回复：我的IE7下显示正常呀

DIV+CSS(115.61.*.*) 发表于：2009-05-14 10:05:52

请问管理员：怎么让它们之间也像横向排列那样，中间有1px到2px的间隔？谢谢

管理员回复：使用外补丁呀

starming(202.100.*.*) 发表于：2009-04-22 09:36:30

管理员，你好！本节和上一节的演示内容貌似把脚本删除也可以实现正常功能，关键是否是这段css'li:hover ul,li.over ul { display:block;}'的作用？

管理员回复：脚本删除后应该在IE6下就不能正常显示了

花开的声音(203.93.*.*) 发表于：2009-02-06 13:13:53

* html ul li { float:left; height:1%;}* html ul li a { height:1%;}可以解释下这两句么？

管理员回复：这两句是css hack，是为了兼容IE浏览器的

花开的声音(203.93.*.*) 发表于：2009-02-06 13:12:11

li ul { position:absolute; left:119px; top:0; display:none;}请问既然是绝对位置，为什么top会随鼠标改变呢？

管理员回复：因为它的父元素li是相对定位的，那么它的绝对定位是相对于父元素，而不是浏览器了。关于相对定位和绝对定位，本站的css版式布局频道最下部有“查对定位和绝对定位”，可以参考一下

丫丫(219.150.*.*) 发表于：2008-12-28 09:09:54

请问，给ul 设置padding这个属性，有什么用啊？没有的话，我试了好像没有什么反应？？是不是为了和网页其他对象排版使用的？？

管理员回复：怎么没用，有用呀，你可以给它赋个值看看

阿笨希(61.153.*.*) 发表于：2008-11-28 11:24:31

li:hover ul这句怎么解释呀？

管理员回复：意思是当鼠标放到li上时，li的ul显示什么样式。目前IE只支持a的伪类，其它标签的伪类不支持。所以此设置只有火狐可以识别，li.over ul加上JS部分是为了兼容IE。

如果有一天(60.16.*.*) 发表于：2008-11-26 09:51:38

懂了 谢谢嘎

管理员回复：不客气！！

如果有一天(60.16.*.*) 发表于：2008-11-26 08:41:21

这个没有懂,怎么横向的就变成纵向的了,加上float:left;也是纵向的,能给我讲一下么,先谢谢啦!

管理员回复：li加上float:left;是让li元素左浮动，而当li浮动到行未尾或剩下的位置容不上一个li元素时会自动换行。本例因为设置了ul的宽度为120px;正好和li的宽度相同，所以呈现的效果还是纵向排列的。