第八天　下拉及多级弹出菜单

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

chichu007(119.129.*.*) 发表于：2011-08-26 18:21:28

csshover.htc 站长有空也能讲讲这个，较好的解决掉IE6的 hover问题。对js不熟悉的人。。。。

274517795(116.63.*.*) 发表于：2011-08-24 12:06:37

发现管理员竟然亲自回复，果断注册了 希望本站越来越好 感谢站长的无私奉献

ksharplee(220.188.*.*) 发表于：2011-08-22 16:30:45

老师辛苦了，带下拉子菜单的导航菜单这个例子，为什么“网页版式“和”WEB教程“下的两个弹出菜单的最后一行也就是分别第二个和第三个li在鼠标经过上一级菜单时都不能正常显示边框和背景颜色

管理员回复：应该不会的吧，我测试正常的呀

allensolar(192.168.*.*) 发表于：2011-08-12 22:04:48

这个网站实在太好了，我正在愁DIV和CSS，来到这里发现很多好资料，谢谢站长的无私分享和指导，太伟大了，希望能一直做下去，更新更多好内容，造福业界。

wang(27.44.*.*) 发表于：2011-08-07 20:29:43

弹出菜单，已经成功了，但是，我发现一个问题，就是我想把二级菜单的空间隐藏，不占用空间，这怎么做呢？display:none，这个也不行。

管理员回复：不太明白你想要的效果

qq341135(116.26.*.*) 发表于：2011-08-02 14:29:02

请问下为什么<a>的padding值比<span>的padding值少2px？

xiaoluyouyou(123.232.*.*) 发表于：2011-08-01 15:40:56

我知道了。。。少了一条代码

xiaoluyouyou(123.232.*.*) 发表于：2011-08-01 15:38:07

你好，老师，我的不知道为什么图片不显示，把您的代码粘贴更改连接也不现实，但是直接运行您的代码就显示了。不知道怎么回事。

管理员回复：还是路径问题，你直接复制我的图片，到你的地方是相对路径，但你预览的地方又没有相应的图片

panjy12(219.238.*.*) 发表于：2011-07-25 08:50:55

老师，为什么我的下拉菜单都是在右边显示，而不是在下方？我的是IE9。

管理员回复：我的实例在IE9下怎么样？我没测试过

xiangguoxiang(219.134.*.*) 发表于：2011-07-24 22:09:01

老师,今天的课程中"css自适应宽度滑动门菜单",我做出来在IE8中显示没有问题,但是用IETest测试在IE6中显示不对了(文字不在按钮框中),请问这个有兼容IE6的解决办法吗?

管理员回复：我的实例呢？

panjy12(219.238.*.*) 发表于：2011-07-23 16:18:04

老师，那个“带下拉子菜单的导航菜单”的例子，完完全全复制你的，可以为什么在我的服务器上发布后，鼠标移到“网页版式”时，它的下拉项在右边显示，而不是在下面？“web教程”下拉项也一样。

管理员回复：那还是有不对的地方，如果复制到你的页面中，注意是不是页面中其他元素的样式影响到了

tianniao(60.220.*.*) 发表于：2011-07-22 22:21:52

为啥本站代码复制到DWcs3没有下拉菜单？谢谢！

管理员回复：dw3下？最终预览不是在浏览器下吗？

aresxian(202.113.*.*) 发表于：2011-07-13 10:04:48

本节最后一个实例a { display: block; float:left; margin:5px;…… 代码中margin是指谁的边距为什么我改为0后 a 之间还会有一定空隙啊

管理员回复：距离周围其他元素的距离

lsyamazing(113.4.*.*) 发表于：2011-06-09 13:45:32

老师辛苦了，讲的的确很好，思路很清晰明了！感谢您！

milan446(117.79.*.*) 发表于：2011-05-27 18:10:19

教程非常不错！谢谢老师不吝赐教！第一个问题，第八天的（css自适应宽度滑动门菜单），能否运用无序列表来实现自适应宽度呢？我试做了，但是没有成功。第二个问题，同一个页面里，可以同时拥有固定的菜单和自适应宽度滑动菜单吗？谢谢！

管理员回复：两个答案都是肯定的

libi1128662(122.224.*.*) 发表于：2011-05-23 13:50:08

不兼容IE6.0的，怎么样才能调成兼容呢

管理员回复：css hack

tianymeng(120.32.*.*) 发表于：2011-05-05 18:16:12

老师您好！首先非常感谢您的教程，看了您这些教程，我现在基本企业的css都能写了，大大地谢谢！ 其次，我在写代码都有碰到很多都要用到js的地方，比如多列自适应高度等高了，多级隐藏弹出菜单了，插入flash的js代码了什么，还很多。这些我都用网上去找，网上都有，但有时候我都不会用，网上的很杂。想问老师您有没空整理些一些常用简单的js代码，做个整理出来。这个网站的js那个版块我都没找到一些常用的。。

管理员回复：js有专门的网站，不是本站的强项

smile07(118.195.*.*) 发表于：2011-04-26 09:53:08

老师，为什么我做的css自适应宽度滑动门菜单，鼠标移上去没有显示图片啊。 <style type="text/css"> <!-- a { display: block; font-size: 14px; line-height: 37px; font-weight: bold; text-decoration: none; height: 37px; background-image: url(a.jpg); background-repeat: no-repeat; background-position: 0px 0px; text-align: center; color: #d84700; float: left; margin: 5px; padding-left: 18px; } a span { display: block; padding-right: 20px; background-image: url(a.jpg); background-repeat: no-repeat; background-position: right 0px; } a:hover { background-image: url(b.jpg); background-repeat: no-repeat; background-position: 0px -37px; background-color: #FF0000; } a:hover span { background-image: url(b.jpg); background-repeat: no-repeat; background-position: right -37px; background-color: #000000; } --> </style>

管理员回复：仔细对照本站的源代码

ypw789456(61.142.*.*) 发表于：2011-04-25 23:44:32

a:hover { background: url(/upload/2010-08/17/091722_btn_bg.gif) no-repeat 0px -37px;} 这窜代码有两个像素值是什么意思

管理员回复：对背景图片定位，具体请参考css手册

jinnis(183.12.*.*) 发表于：2011-04-19 15:30:29

我点网页板式的时候 进入这个页面 怎么样才可以让网页板式 会有有个图片叠加上面 告诉我们 进入的是网页板式页面了

管理员回复：晕了，不明白你在说什么

cssabc(121.206.*.*) 发表于：2011-04-12 01:05:59

自适应宽度中：<div id="layout"><ul><li><a href="#"><span>内容</span></a></li></ul></div> 我CSS写成这样:#layout ul li a span{ } 不行正常显示!!!!!! 写成这样；#layout a span{ }就能正常显示呢。十分的不解！望老师答复~

管理员回复：理论上是可以的

kof(61.145.*.*) 发表于：2011-04-01 12:53:27

老师好，我想问一下我在.html的文件中调用.css文件里的规则，在.css这个文件里我又要用到一个js定义的函数(current)，于是我把定义current的JS代码也写在.css的文件里（为了.html的文件在调用时就一起调用了.css里的规则和那段js代码）,可是这样浏览器报错，于是我把那段定义current的JS代码写在.html文件里,可是这样在.cssr 文件里它又找不找current函数也报错提示RegExp有错“..不为1或不是对象...”有没有什么样的做法能让.html文件在调用.css规则时也就能一起调用js定义的函数(不知道把current定义成整个站点都能用的全局函数是怎么写的,行得通吗？有这样的写法吗...--!)

管理员回复：晕了，哪有js代码写在css里的呀，css只是定义样式的

lpbottle(123.118.*.*) 发表于：2011-03-17 14:05:11

一个元素浮动或绝对定位后，它将自动转换为块级元素，而不论该元素本身是什么类型. 那么给span加上 float: right; 之后它是不是转化成了block？在我的浏览器里并没有见它换行呀？如果要变成内联的话还需要额外添加 display: inline 么？

管理员回复：因为你对它浮动了，脱离了原有文档流，这时你可以设置个宽高看看

lianhl(210.22.*.*) 发表于：2011-02-22 16:18:00

一个元素浮动或绝对定位后，它将自动转换为块级元素，而不论该元素本身是什么类型。 老师我想问变成块级元素后不是意味着要换行吗？为什么#menu ul li { float: left; margin-left: 2px; }却没有换行呢，请务必回答。

管理员回复：浮动了呀

kkwan111(113.58.*.*) 发表于：2011-01-19 19:53:29

站长,你好!问一下在本节课中下拉菜单的例子,在IE下点运行代码能出现下拉菜单,但复制你的代码粘贴后,用IE6打开没有下拉菜单,用360浏览器打开就有下拉菜单,能说一下为何吗

管理员回复：不知道了

lllxjy(69.122.*.*) 发表于：2011-01-10 08:22:37

您好！这样子做下拉菜单有个问题，就是他下拉的时候会扩大那个div的高度，就把下面的元素都往下挤了，有什么方法解决吗？另外。如果二级菜单总是靠右的话，我加了个padding: 0就正确了

管理员回复：使用绝对定位就行了

dangcigao(60.191.*.*) 发表于：2011-01-06 22:23:16

<font color='black'>学习了</font>学习了

dzeren(183.32.*.*) 发表于：2010-12-29 21:38:36

function menuFix() { var sfEls = document.getElementById("menu").getElementsByTagName("li"); for (var i=0; i<sfEls.length; i++) { sfEls[i].onmouseover=function() { this.className+=(this.className.length>0? " ": "") + "sfhover"; } sfEls[i].onMouseDown=function() { this.className+=(this.className.length>0? " ": "") + "sfhover"; } sfEls[i].onMouseUp=function() { this.className+=(this.className.length>0? " ": "") + "sfhover"; } sfEls[i].onmouseout=function() { this.className=this.className.replace(new RegExp("( ?|^)sfhover\\b"), ""); } } } window.onload=menuFix; 能告诉我这是什么意思吗

管理员回复：js方面的知识请到专业站点上去了解

pfqianjin(119.163.*.*) 发表于：2010-12-27 16:18:28

为什么下拉菜单总是在一级菜单的右侧出现呢

管理员回复：用定位

elf(210.22.*.*) 发表于：2010-12-24 11:55:43

老师，我没用JS,就敲了CSS代码，其他一切都正常，就是鼠标离开一级菜单要点下拉菜单的时候，下拉菜单就会消失，永远都点不到，这是怎么回事呢？ 管理员回复：请仔细和教程中源代码对比 这个坚决了吗？我的代码在firefox中显示是正常的，在IE 8中就是不正常。代码是一样样的

管理员回复：那源代码的实例能正常显示吗

weifq24(123.147.*.*) 发表于：2010-12-23 20:45:42

老师，您好，在“带下拉子菜单的导航菜单”的学习中，有一段CSS代码是： #menu ul { list-style: none; margin: 0px; padding: 0px; } #menu ul li { float:left; margin-left:2px;} 为什么不能把margin-left:2px放到ul的属性中呢，我放进去试了下，页面会发生变化，还有，去掉ul的margin: 0px; padding: 0px也会导致导航栏发生变化，ul的默认margin和padding难道不是0么？

管理员回复：1、放到li下是为了两个li之间有2px的间隙，margin和padding是为了避免不同浏览器解析不一样

abxiechengjun(202.158.*.*) 发表于：2010-12-18 14:17:19

不错比较实用 的东西，多谢站长继续提供新的实用的新的技术教程！不胜感激！

管理员回复：欢迎常来...

zengzhit05(116.205.*.*) 发表于：2010-12-18 11:37:23

这里 GIF透明图片 或者 PNG 会有问题

管理员回复：什么问题？

heiba(113.9.*.*) 发表于：2010-11-15 14:06:59

您好！站长 问一下在本节课中下拉菜单的例子：就是弹出来的下拉菜单比相对应的导航稍微长出了几像素，能让他们一样宽吗？我自己调了半天也没调出来，固定宽度也不行，您的例子也是那样！

管理员回复：改宽度肯定行，再仔细找找

iwindce(123.149.*.*) 发表于：2010-11-14 14:20:43

body{font:14px Verdana;} #menu{ width:800px; margin:0 auto;border-bottom:3px solid #E10001; height:28px;} #menu ul{ list-style:none; margin: 0px; padding: 0px;} /*position:relative;*/ #menu ul li{ float:left; margin-left:2px; position:relative;} #menu ul li a{display:block; background:url(bgmenu.png) no-repeat 0 - 28px; line-height:28px; text-align:center; width:87px; height:28px; text-decoration:none;} #menu ul li a:visited{ background:url(bgmenu.png) no-repeat 0 0;} #menu ul li a:hover{ background:url(bgmenu.png) no-repeat 0 -56px;} /* position:absolute;*/ #menu ul li ul{ display:none; position:absolute; width:87px; border:1px solid #ccc;} #menu ul li:hover ul { display:block;} #menu ul li ul li{ float:none; margin:0; width:87px; border-bottom:1px #963 solid;} /* ---------------------- */ #menu ul li ul li a{ background:none #eee;} #menu ul li ul li a:visited{ background:#eee; color:#cc0;} #menu ul li ul li a:hover{ background:#0c0;} 测试以上代码，不用使用js

soso3000(218.81.*.*) 发表于：2010-10-23 23:48:07

老师，我没用JS,就敲了CSS代码，其他一切都正常，就是鼠标离开一级菜单要点下拉菜单的时候，下拉菜单就会消失，永远都点不到，这是怎么回事呢？

管理员回复：请仔细和教程中源代码对比

zhonlin12(61.153.*.*) 发表于：2010-10-17 15:19:55

老师那段JS代码不懂 能解释下吗 谢谢啦

管理员回复：如果想了解js的话，建议去找专门的js教程来学习

sstao(122.5.*.*) 发表于：2010-10-04 11:56:48

站长老师，为什么我在有的电脑点击运行代码能出来效果，有的点了以后不出效果啊，出现about:blank空白页，我用的id6和360都不行，是不是禁用什么了？

管理员回复：有可能是吧

xmuedu(218.3.*.*) 发表于：2010-09-29 10:48:35

二、绝对定位和浮动的区别和运用 请教布局时用绝对定位和浮动哪个用的多一些，一个布局两种方法都可以用，哪种更好呢？

管理员回复：一般用浮动多一些

hohai(120.195.*.*) 发表于：2010-09-22 18:41:18

站长，我想做二级水平导航，如果把二级菜单float:none改为float:left，怎使二级菜单相对居中啊？

管理员回复：怎么个相对居中法？

kylin87(123.14.*.*) 发表于：2010-09-19 15:49:42

和例子同样的代码。不过是我自己敲的，用比较工具也比较了，没有区别，但是，我敲的，第一个例子，鼠标放上去，二级菜单把一级菜单覆盖了，直接复制上面的，却没有。求解惑...

管理员回复：那就怪了。如果完全一样的代码不可能会出现两种显示的。

wbh87511249(58.39.*.*) 发表于：2010-09-15 12:52:30

按您说的做，我在下接菜单下面放了个DIV，在div里放入“中国万网首页js幻灯图片切换广告代码”后下拉菜单无法完全显示出来，就是说下拉菜单显示到js那里就显示不出来了，请问下怎么处理，急

管理员回复：是被幻灯盖住了吗，如果盖住了是层级的问题

johai(59.59.*.*) 发表于：2010-09-14 18:10:50

#menu ul li a#current { background:url(http://www.aa25.cn/upload/2010-06/27/nav_bg1.gif) 0 0 no-repeat; font-weight:bold; color:#fff;} 这句中的a#current为什么不要空格

管理员回复：要空格就不生效了，纠结

fuyun1122(219.142.*.*) 发表于：2010-09-14 17:34:35

这些资料都很不错！！！顶 怎么没有MSN的群呢

管理员回复：呵呵，对msn不感冒

a20108888(183.33.*.*) 发表于：2010-09-14 15:47:13

怎么没选项卡的教程呢？就是点击就会切换的。 我想学。。

管理员回复：你把这些都学好了，找个选择卡切换的js，自己都加上了

hohai2008(218.104.*.*) 发表于：2010-09-10 13:31:46

站长，这个可以修改成二级水平导航条吗？

管理员回复：把float:none改为left就行了

jiangzhigang(113.243.*.*) 发表于：2010-09-09 22:52:02

谢谢管理员这么有耐心发这些实用的教程。本人进步不小，哈哈。

管理员回复：谢谢肯定，欢迎常来

ads(219.133.*.*) 发表于：2010-09-07 15:43:54

为什么我的二级下拉菜单什么都清除了，就是有那一条3px红线没有清除？

管理员回复：什么意思

飞不停的鸟(58.246.*.*) 发表于：2010-09-07 15:12:50

按课程所说的方法实现了该功能， 但设了给#menu ul li ul增加position:absolute;属性，显示下级菜单与上级并排，而不在上级下面。

管理员回复：用top定位

yier202(60.166.*.*) 发表于：2010-09-07 09:00:43

带下拉子菜单的导航菜单 按课程所说的方法成功实现了该功能 如果要讲下拉菜单横向排列是不是应该把 #menu ul li ul li 里的float:none 改成 float:left？但是试过以后只在IE6下测试成功.求解

管理员回复：正常呀，我在IE8下显示正常的

yier202(60.166.*.*) 发表于：2010-09-07 08:48:55

带下拉子菜单的导航菜单 这一节里面 完成以后 下拉菜单和上面的导航菜单还是有一定的像素差距（不同浏览器差距都不一样） 请问这个有什么更好的解决办法吗？

管理员回复：top和left定位

以角(220.250.*.*) 发表于：2010-09-05 21:28:54

气味儿

xiangone(120.42.*.*) 发表于：2010-09-01 17:05:25

奇怪···带下拉子菜单的导航菜单 这个效果 除了火狐 其他浏览器都显示不出下拉菜单···呃····

管理员回复：不会吧，我这儿测试都正常呀

menova(112.93.*.*) 发表于：2010-08-27 23:22:45

最好来的整站案例讲解！还有想问站在这站的后台是什么程序做的啊！

管理员回复：整站案例讲解在最后一天。用的php

hungry(125.90.*.*) 发表于：2010-08-27 11:52:33

站长能不能告诉一下我，你的网站是用的什么空间的啊？大致配置如何？最好能告诉是哪个空间商的，如果不方便在这里回答，麻烦发一下到我的邮箱hungry198@126.com,谢谢了

管理员回复：朋友的

happyelf(60.0.*.*) 发表于：2010-08-26 15:59:59

介绍的很让人能够看下去，而且很实用。。。。一看就是有经验之人

管理员回复：是呀，都是根据自己经验总结的

blue217(60.191.*.*) 发表于：2010-08-26 15:27:26

为什么我添加了下级菜单以后，那个MENU的底部那条3PX的红线位置也移下来了呢？变到下极菜单下面了。

管理员回复：请看教程结尾部分

menova(112.93.*.*) 发表于：2010-08-26 00:44:35

很好，很强大，比买的书更容易懂，可以考虑出本书！

管理员回复：哈哈，出书的话你可经捧场呀

1189(112.64.*.*) 发表于：2010-08-25 10:47:56

最后两天呢？

管理员回复：正在出

alickce(211.165.*.*) 发表于：2010-08-24 16:23:38

无意间浏览到“标准之路” 第一感觉：灰常不错！ 第二感觉：确实不错 第三感觉：真的不错！

管理员回复：谢谢肯定，欢迎常来