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

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

Join0213(125.107.*.*) 发表于：2011-06-22 16:19:20: 为什么我的二级菜单。有几个移上去可以。有几个就不行要刷新一下原先不可以的。就可以了。; 管理员回复：不太明白

lovefly(203.171.*.*) 发表于：2010-12-22 15:16:00: 我的二级菜单在Ie8里正常，在火狐里不显示，怎么回事？; 管理员回复：不知道了

powerisam(59.174.*.*) 发表于：2010-09-22 20:52:22: 非常感谢站长！本站的内容相当的实用！; 管理员回复：欢迎常来

biaozhun(60.216.*.*) 发表于：2010-09-21 10:16:55: this.className+=" over"; 这句代码是什么意思作用是什么; 管理员回复：增加一个over的样式

nalten(182.88.*.*) 发表于：2010-09-19 18:59:54: 请问一个问题,不用这段JavaScript代码也能实了.为什么还要加上呢?加上后也没看到有何不同呀?; 管理员回复：兼容IE6

SMILE(221.205.*.*) 发表于：2010-08-22 09:30:29: 本站超赞，加油

无悔(125.90.*.*) 发表于：2010-08-21 16:08:19: 老师，我又有问题了，就是能不能当鼠标放到下拉菜单的时候，对应的主菜单保持hover状态时候的背景？; 管理员回复：用js吧

无悔(125.90.*.*) 发表于：2010-08-21 14:35:35: 为什么li ul { display:none;}这一句，写成#nav li ul { display:none;}会失效？？; 管理员回复：请看教程http://www.aa25.cn/div_css/393.shtml

无悔(125.90.*.*) 发表于：2010-08-21 13:50:04: 请问所有的li到float：left，那么下拉下来的菜单怎么不会横向排列呢？好像没设置什么啊，按道理不应该是横向排列吗？; 管理员回复：有宽度限制呀，当它后边的空间不足以容纳下下一个元素显示时，它就显示到下边了

abao(115.239.*.*) 发表于：2010-08-19 08:56:41: 站长试下，麻烦帮忙改下源码，本人QQ64740125

1122(123.150.*.*) 发表于：2010-08-19 08:26:38: 站长真是很耐心呢，不像有的站，提问了不管～赞个～; 管理员回复：欢迎常来

abao(124.239.*.*) 发表于：2010-08-18 13:14:37: 补充一下：火狐可以正常显示!

abao(124.239.*.*) 发表于：2010-08-18 13:14:02: 管理员您好，我在试验下拉菜单，NAV下方是个FLASH-BANNER，下拉菜单一旦到banner,下拉菜单就失效了，（不是FLASH覆盖，已经做了透明处理了）; 管理员回复：有这种事？

1383061ma(60.164.*.*) 发表于：2010-08-03 13:52:51: 这个javascript看不懂啊。为何不用简单点的javascript。 javascript在超链接里有个onmouseover 和onmouseout动作。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>下拉及多级弹出式菜单www.aa25.cn</title> <style> ul { padding:0; margin:0; list-style:none;} li { float:left; width:100px;} li ul{display:none} ul li a { display:block; font-size:12px; border:1px solid #ccc; margin-top:2px; margin-left:3px; padding:3px; text-decoration:none; color:#777;} ul li a:hover { background-color:#ddd;} </style> </head> <body> <ul id="nav"> <li><a href="" onmouseover="document.getElementById('shows').style.display='block'" onmouseout="document.getElementById('shows').style.display='none'">文章 </a> <ul id="shows"> <li><a href="">CSS教程</a></li> <li><a href="">DOM教程</a></li> <li><a href="">XML教程</a></li> <li><a href="">FLASH教程</a></li> </ul> </li> <li><a href="">参考</a> <ul id="shows"> <li><a href="">XHTML</a></li> <li><a href="">XML</a></li> <li><a href="">CSS</a></li> </ul> </li> <li><a href="">BLOG</a> <ul id="shows"> <li><a href="">全部</a></li> <li><a href="">网页技术</a></li> <li><a href="">UI技术</a></li> <li><a href="">FLASH技术</a></li> </ul> </li> </ul> <ul> <li><a href="">摇滚</a></li> <li><a href="">纯音乐</a></li> <li><a href="">古典金曲</a></li> <li><a href="">电影原声</a></li> </ul> <div> <p style="clear:both"> 大家好 </p> </div> </body> </html> 简易明了; 管理员回复：显示的下拉菜单鼠标能移上吗

a(222.79.*.*) 发表于：2010-07-29 00:46:38: li:hover ul,.over ul { display:block;}中的.over ul 是什么意思了; 管理员回复：class为over下的ul

liliyuanyang(113.66.*.*) 发表于：2010-07-12 13:11:21: 这个例子中的<ul id="nav">，“nav”没有任何样式，可是没何我没的<ul id="nav">改成<ul>后，结果就是隐藏的内容显示不出来，为何呢？; 管理员回复：js里用到了

srabbitliu(202.106.*.*) 发表于：2010-07-07 10:03:49: 您好，我是新手，最后的li:hover ul,.over ul { display:block;}我知道加上这句话，就能实现下拉菜单了，但是这句话没太看懂，能否再详细解释一下。。谢谢：）; 管理员回复：去查css手册吧，或者查看之前的评论

jxt(222.37.*.*) 发表于：2010-06-21 08:51:02: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>无标题文档</title> <script type="text/javascript"><![CDATA[//><!]]></script> <style type="text/css">  </style></head> <body> <div id="quanju"> <div id="top"> <table width="100%" height="275" border="0" cellpadding="0" cellspacing="0"> <tr> <td height="4" colspan="2" bgcolor="#56810e"> </td> </tr> <tr> <td width="185" height="94"><img src="images/xiaoyakeji.gif" width="185" height="94" /></td> <td width="819"> <div id="daohang"> <ul> <li><a href="#">首页</a></li> <li class="menudiv"></li> <ul> <li><a href="#">首页</a></li> <li><a href="#">首页</a></li> <li><a href="#">首页</a></li> </ul> <li><a href="#">关于小鸭</a></li> <li class="menudiv"></li> <li><a href="#">科技研发</a></li> <li class="menudiv"></li> <li><a href="#">产品展示</a></li> <li class="menudiv"></li> <li><a href="#">新闻资讯</a></li> <li class="menudiv"></li> <li><a href="#">人力资源</a></li> <li class="menudiv"></li> <li><a href="#">联系我们</a></li> <li class="menudiv"></li> </ul> </div></td> </tr> <tr> <td colspan="2"> </td> </tr> <tr> <td colspan="2"> </td> </tr> </table> </div> </div> </body> </html> 我郁闷的是为什么我的下拉菜单出不来！我找不到错误; 管理员回复：请参照本教程的实例进行修改

jxt(124.239.*.*) 发表于：2010-06-19 08:47:59: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>无标题文档</title> <script type="text/javascript"><![CDATA[//><!]]></script> <style type="text/css">  </style></head> <body> <div id="quanju"> <div id="top"> <table width="100%" height="275" border="0" cellpadding="0" cellspacing="0"> <tr> <td height="4" colspan="2" bgcolor="#56810e"> </td> </tr> <tr> <td width="185" height="94"><img src="images/xiaoyakeji.gif" width="185" height="94" /></td> <td width="819"> <div id="daohang"> <ul> <li><a href="#">首页</a></li> <li class="menudiv"></li> <ul> <li><a href="#">首页</a></li> <li><a href="#">首页</a></li> <li><a href="#">首页</a></li> </ul> <li><a href="#">关于小鸭</a></li> <li class="menudiv"></li> <li><a href="#">科技研发</a></li> <li class="menudiv"></li> <li><a href="#">产品展示</a></li> <li class="menudiv"></li> <li><a href="#">新闻资讯</a></li> <li class="menudiv"></li> <li><a href="#">人力资源</a></li> <li class="menudiv"></li> <li><a href="#">联系我们</a></li> <li class="menudiv"></li> </ul> </div></td> </tr> <tr> <td colspan="2"> </td> </tr> <tr> <td colspan="2"> </td> </tr> </table> </div> </div> </body> </html> 帮我看看这个是怎么回事！我都郁闷了一天了; 管理员回复：不知道你郁闷的是什么

910704795(222.137.*.*) 发表于：2010-05-22 00:32:55: 咱们这做出来的网站属于静态的还是动态的啊？; 管理员回复：静态

sunnynanhai(123.116.*.*) 发表于：2010-05-09 14:45:24: 现在还有几个人用IE6以下的浏览器呢

闲庭小草(222.184.*.*) 发表于：2010-04-09 17:01:45: 你好，请问如果定义第一个ul高度为30，那么它应该覆盖在导航下面内容，可ul的高度被撑开而且没有覆盖。为了让ul确定为30，设置溢出隐藏，可第二ul下拉菜单就不显示了。怎么办？设置定位为绝对，可以显示，根据浏览器的不同，如果定义下拉菜单的位置。; 管理员回复：父元素相对，子元素绝对定位就可实现

minixin(125.116.*.*) 发表于：2010-04-04 21:05:35: 谢谢站长，问题解决了。因为我在绝对定位的元素里添加下拉列表，并在列表也用绝对定位，所以在个别浏览器里出现鼠标移上列表跑掉的情况，改用固定定位就解决了。还有这个下拉列表好像不用JS代码IE也可以的啊？为什么还要加JS呢？; 管理员回复：IE6下行不？

zgz1990(125.89.*.*) 发表于：2010-04-04 20:35:57: li { float:left; width:100px;} 这个代码对于嵌套在内部的li应该也是有效的啊，但是比如说“文章”下的几个教程为什么还是竖的排列呢？我自己试了就是横着的……; 管理员回复：因为嵌套的li的父级ul的宽度也是100px，这样第一个li后边没有足够的空间容纳下第二个li了，所以就排到后边了

zgz1990(125.89.*.*) 发表于：2010-04-04 19:39:07: 貌似list-style:none对于ul来说可有可无啊; 管理员回复：那是在IE下，在标准浏览器下就不是这样了

minixin(125.116.*.*) 发表于：2010-04-04 04:08:33: 遇到问题了，我在一个绝对位置的DIV中放了下拉列表，在ul li上用了 relative，在li ul 上用absolute。当鼠标移上去时是可以显示下拉列表，但鼠标移到下拉列表中的第3项时，列表缩回去了。点不了下拉列表中的第3个以下的内容。站长帮帮忙，郁闷死了; 管理员回复：http://www.aa25.cn/393.shtml

dlsfox(222.67.*.*) 发表于：2010-04-03 09:26:45: 谢谢了站长了..........; 管理员回复：不客气

violin0889(219.152.*.*) 发表于：2010-04-01 15:16:19: 用photoshop做效果图后，切片怎么切法能在dw里比较好编辑。同时代码是div +css的吗？做网页设计的步骤是怎样的？谢谢; 管理员回复：这个看你具体的效果图了。

oushoulong(61.142.*.*) 发表于：2010-03-30 08:48:35: 我又有问题了：这个导航条放在左边的话下拉没问题，可是让它居中的话它就一直在那里闪烁不停，这有什么解决办法吗？; 管理员回复：再找一个实用的，这个只是讲解标签的灵活运用。请注意看文章末尾的红色加粗文字

oushoulong(61.142.*.*) 发表于：2010-03-29 13:31:35: 你好，我想问问不要JS那段代码可以吗？我试了一下没有也能正常运行啊，我是在IE浏览器上运行的。; 管理员回复：不要的话IE6应该不行的

Man(220.246.*.*) 发表于：2010-03-19 18:14:39: 我學習了~謝謝~but,我有一個問題~為什麼ul li hover 之後不是全部li ul都顯示,而是對應顯示~我是新手,請指教!!!; 管理员回复：请查看css样式手册中关于css选择器部分

5252610(61.141.*.*) 发表于：2010-03-15 14:20:10: 学了拉。。谢谢阿; 管理员回复：不客气

hopestar86(220.112.*.*) 发表于：2010-03-10 10:21:20: li:hover ul,.over ul { display:block;} 这段代码掉了个h，弄的我看半天没明白 li:hover ul,.hover ul { display:block;}; 管理员回复：over是自定义的样式名称

学习(59.33.*.*) 发表于：2010-03-02 10:13:12: 如何设计这个导航的任意位置啊、代码怎么写; 管理员回复：？？

wg(120.5.*.*) 发表于：2010-02-16 22:20:52: li{float:left;}这个li应该定义的是所有的li吧，但为什么弹出的菜单不是横向的呢？谢谢; 管理员回复：因为li的宽度是100px，那么最外层ul下的li宽度是100px，这样右侧就没有多余空间足够容纳下一个li了，所以就排到下边了

叮叮叮(58.62.*.*) 发表于：2010-01-12 15:04:54: 这样,如果在导航下设个div块,当导航的二级显示的话,会把下面的div块推下去.但一般在网站上面看到的都是导航二级叠在下面的div块上面,而不会把下面的div块给推下去,那应该怎办?; 管理员回复：请看本文末尾的红色说明

卡卡(116.224.*.*) 发表于：2009-12-09 19:28:52: li:hover ul,.over ul { display:block;}我想知道这句的详细解释li:hover ul.over ul分别代表什么意思; 管理员回复：请在下面回复中找

qq28283452(58.247.*.*) 发表于：2009-11-23 16:49:31: 'css中的怕有元素基本上'应该是“所有元素”么？“在最下边的预览内代码你可以看到，里边加上了和段js代码”后半句有错。站长注意错别字哦; 管理员回复：谢谢啊，已更新

Guest(134.74.*.*) 发表于：2009-11-20 02:37:24: 下拉及多级弹出式菜单www.aa25.cn <!--startList = function() { if (document.all&&document.getElementById) { navRoot = document.getElementById('nav'); for (i=0; i<navRoot.childNodes.length; i++) { node = navRoot.childNodes[i]; if (node.nodeName=='LI') { node.onmo

sola(116.30.*.*) 发表于：2009-11-19 12:01:40: 这段代码第一层嵌套的最后个有错误，应该添加个音乐谢谢楼主提供的代码样式

我要学习(123.180.*.*) 发表于：2009-11-13 17:22:55: class为over的li.是什么意思。我怎么在结构代码中，找不到.over的标识呢。不明白，能否详细解释一下; 管理员回复：在js代码中有，那个class是用js打上的

Guest(125.115.*.*) 发表于：2009-11-12 21:59:42: li:hover ul,li.over ul { display:block;}这句不太明白，后面的li.over是什么意思哦？; 管理员回复：指class为over的li

lam(222.134.*.*) 发表于：2009-11-04 16:09:42: 这一段时间一直在看这个网站，获益匪浅，希望站长把给多的好东西奉献出来，谢谢啦！！; 管理员回复：以后会有的

彬~(120.32.*.*) 发表于：2009-11-04 14:31:15: 测试过，没有js的情况下，ie7和firefox都可以正常显示，但是ie6 不能正常显示; 管理员回复：是呀，js就是为了解决ie6问题的

kuku99(117.26.*.*) 发表于：2009-11-01 11:54:57: 中id='nav'是什么意思,好象去掉也可以

kuku99(117.26.*.*) 发表于：2009-11-01 11:07:24: 中id='nav'是什么作用,没有好象也可以; 管理员回复：在js当中用到了

抓月(114.243.*.*) 发表于：2009-10-29 13:02:21: 很有收获，感谢站长的无私奉献并佩服站长的聪明才智; 管理员回复：谢谢，常来哟

jokey(221.225.*.*) 发表于：2009-10-14 16:41:52: 能否详细讲解下该案例的javascript的代码，因为我把该案例的javascript删除后，还能正常看内容。; 管理员回复：加上这段js代码，它是用来控制在IE浏览器下显示下拉菜单的，本来li:hover ul这句是可以的，但IE对css的支持还还完善，所以需要借助JS来控制。

kulaex2(59.36.*.*) 发表于：2009-10-10 11:13:58: 这个代码能在火狐实现不?火狐对下拉菜单支持好不?用哪种方式实现比较好?; 管理员回复：你在火狐里试下不就知道了

QuickLeane(82.10.*.*) 发表于：2009-10-10 04:24:11: 内容很实用，但是每次想把页面内容打印出来却都只能打印出一部分而不是全部。; 管理员回复：复制到word里打印试试

fanfan7529(218.2.*.*) 发表于：2009-09-27 20:02:48: li.over ul 是什么意思阿; 管理员回复：表示定义class为over的li下的ul元素，有点绕嘴

恐龙草(119.167.*.*) 发表于：2009-09-27 18:01:09: li { float:left; width:100px;}为什么不是所有的li都横着显示; 管理员回复：可能是你的你的父元素宽度不能容纳下所有的li

tichan(116.20.*.*) 发表于：2009-09-27 12:21:43: 站长大人帮我解决一下这个下来菜单吧，ie6 显示有问题二级菜单不能横向显示。ie7-8都可以ff都正常http://web9927747.sea68.com/riva_contact.asp 这个是网站网址; 管理员回复：这个问题在线给你解决过了

123(60.164.*.*) 发表于：2009-09-08 22:05:52: 我学习到这里了。可在网站指定的网站能打来，而复制下了就不能运行了，这是怎么回事，自己在DW里写一样的代码也不能显示; 管理员回复：这个得看你的代码了

tichan(121.9.*.*) 发表于：2009-08-25 08:33:06: 其实把几个浏览器的特性掌握了就不难了.请问有这类的文章吗？我看到Dreamweaver里面提示如果某条边与浮动方向同向，则向该边上的浮动框应用边距时，边距会增加一倍。此错误只影响一次或多次浮动的某行中的第一次浮动。影响: Internet Explorer 6.0可能性: 非常可能这个怎么解决？; 管理员回复：这是IE6的双倍边距bug，在本站的css网站常用布局频道底部我列出了常见的几个问题及解决办法，希望对你有所帮助

tichan(121.9.*.*) 发表于：2009-08-24 10:25:19: 今天发现了个兼容问题，昨天在网站上下了个ie test 我发现我的网页ie6能打开但是没弹出菜单。ie7什么都没显示。我是win7 IE8的就没问题。世界之窗浏览器发现错位。555555 怎么会这样！做个网页都这么难; 管理员回复：其实把几个浏览器的特性掌握了就不难了

tichan(121.9.*.*) 发表于：2009-08-24 10:20:25: li a:active{ color:#FF6600;} 我这么设置没效果，点了之后还是默认的紫色，还是把全部链接点过之后全部链接都是紫色。; 管理员回复：应该用a:visited，可能之前说的有误，抱歉

ticc(116.5.*.*) 发表于：2009-08-23 14:39:02: 很好很实用; 管理员回复：^_^

tichan(116.5.*.*) 发表于：2009-08-23 14:38:36: 管理员回复：那就把访问过的状态也给设置下怎么设置？; 管理员回复：用a:visited{}来设置访问过的状态

tichan(121.9.*.*) 发表于：2009-08-23 08:34:38: 能出一个横向弹出菜单，然后弹出菜单是全图片的，不是文字的教程吗？; 管理员回复：把横向导航菜单的文字换成图片不就行了吗

tichan(119.126.*.*) 发表于：2009-08-22 21:49:36: 无标题文档 HOME ABOUT PEOFILE CULTRUE PRODUT PEOFILE CULTRUE SEVRICS CONTACT /*--------------下面是css部分*/ 无标题文档 --> <!--function menuFix() { var sfEls = document.getElementById('nav').getElementsByTagName('li'); for (var i=0

tichan(119.126.*.*) 发表于：2009-08-22 21:46:58: 怎么设置访问过的状态呢？我是刚刚跟你的视频学制作的。只学了4天。; 管理员回复：用a:visited{}来设置访问过的状态

tichan(125.95.*.*) 发表于：2009-08-21 16:06:46: 我的菜单是 game soft 然后game有弹出菜单cs cs2，鼠标经过game弹出菜单的同时却把soft挤到右面去了。就是game跟soft之间空出了一块来。是什么问题？; 管理员回复：这个得看源代码解决了。

tichan(125.95.*.*) 发表于：2009-08-21 15:36:43: 另外还有个问题，我按照前一些课程里面设置了鼠标经过时的颜色和鼠标访问过的颜色。但是这个访问过的颜色却不会随我点另外一个连接而消失，而是跟我现在访问过的颜色共存了。这么一个导航条全部都访问过就全部都变色了。; 管理员回复：那就把访问过的状态也给设置下

tichan(125.95.*.*) 发表于：2009-08-21 15:33:06: 你好啊！我看了这个课程。有个问题想问一下，我想设置弹出菜单字体是要Abode黑体。那我怎么可以保证别人的电脑显示也是这个字体呢？; 管理员回复：除非别人的电脑中也装有这个字体，否则将显示宋体，不过在css里也可以使用远程字体，这样用户在访问时会下载这个字体，但字体文件不能大，如果大的话得半天下载，也没什么意义。如果是小范围内使用，可以做成图片。

Guest(219.149.*.*) 发表于：2009-08-05 16:39:26: 你好：如果把这个下拉菜单所在页面用iframe来嵌入其他页面content.jsp，然后在点击下拉菜单，菜单子项不能浮动在content.jsp内容上，而是必须自己再占用页面空间，将content.jsp挤下了一定像素（像素大小为子菜单长度），那么要做到菜单浮动在content.jsp页面上，如何实现？非常感激！！; 管理员回复：这个好像不用iframe来实现吧，直接放在页面里不就行了。或者为了修改方便可以用include包含

毛毛猫(58.23.*.*) 发表于：2009-06-29 14:12:15: 亲爱的管理人员：您又没有测试过 IE6.0 以上（包括IE6.0）的都可以支持呢要是没有测试，不是给别人很大麻烦吗; 管理员回复：测试了呀，请看本文最后一句话：此例子只是讲解标签的灵活运用及css的强大功能。在实际应用时请参考http://www.aa25.cn/393.shtml

jjan(119.130.*.*) 发表于：2009-06-28 22:38:34: 站长,前面的些IF函数怎么个理解呢，有点看不明白。。。; 管理员回复：那属于js部分，需要有一定的js基础

菜N(58.19.*.*) 发表于：2009-06-19 00:47:43: 我把这个程序加到一个div中，结果下拉菜单一弹出来，这个div就被称开了，请问有什么办法解决？; 管理员回复：请参考http://www.aa25.cn/393.shtml

small(113.12.*.*) 发表于：2009-06-13 13:52:58: 怎么让它居中显示啊; 管理员回复：设置整个div的宽度，然后margin:0 auto;

文文(125.33.*.*) 发表于：2009-06-12 15:09:37: li:hover ul,li.over ul { display:block;}这里不是很懂，为什么要这么写？li:hover ul是鼠标滑过时li下的ul里面的内容会显示是吗？为什么li a:hover ul这样写不行呢？

123(119.118.*.*) 发表于：2009-06-06 13:28:31: 想加你的Q,可以么?方便以后咨询~; 管理员回复：本人知道的东西都在网站上展示着呢，有问题直接来网站查询就可以了

222(122.4.*.*) 发表于：2009-05-20 16:14:22: 我变了样式的名称，然后把ID后面的名字也变了可是为什么不行了呢？; 管理员回复：问题描述不详

chen(119.123.*.*) 发表于：2009-05-18 17:48:13: js里面第一个IF判断if(document.all&&document.getElementById)有什么详细作用呢？; 管理员回复：百度一下，你就知道

allan(218.18.*.*) 发表于：2009-05-12 19:47:27: 请教一下http://www.scou.net/ces/ces.html.你可以帮我看.我如果让'美体'栏目跟'发型'栏目平排显示啊!; 管理员回复：没用li的直接就是横排显示了，用li的话浮动即可

DIV+CSS(115.61.*.*) 发表于：2009-05-11 22:19:55: li:hover ul,li.over ul { display:block;}针对这一句，我想问一下：li:hover ul和li.over ul 分别怎样解释，有什么原则问题没有？你是怎么知道的？就像后面的li.over ul 中突然冒出个.over 到底是什么意思？怎么在后面的语句中没有看到哪句引用.over 这个类的？; 管理员回复：li.over ul表示定义class为over的li下的ul。比较绕嘴，也可以把li去掉，直接写成.voer ul

DIV+CSS(115.61.*.*) 发表于：2009-05-11 09:25:57: 管理员我想问一下：在li ul { display:none; top:20px;}里面，设置top还有没有作用，若用作用，请说明用什么样的作用？谢谢。偶一直感觉在这里的top没有起什么作用？; 管理员回复：是没用，已去掉了

allan(218.18.*.*) 发表于：2009-05-08 13:29:52: 还是没有对.我设置了颜色的.我现在把我自己在dw的代码给你看下.我用的ie8浏览器,我没有加你的js是可以用的.问题是他显示在后面测试文档 <!--body {background-color:#FFF;}#qb {width:980px; margin:0px auto;}.la {height:30px; top:0px;}aa {background:#9CF;}ul { margin:0px; list-style:none;}li {float:left; width:100px;; 管理员回复：你设置ul li a { background:#fff;}再看看。不是把背景色调协在body上

allan(218.18.*.*) 发表于：2009-05-07 20:39:11: 你试下这样的.我说了2编.你好像没有明白.那我就复制全部代码.但是好像和我有点出入.就是我给ul加了个套在你这好像没有用似的的下拉及多级弹出式菜单www.aa25.cn <!--startList = function() { if (document.all&&document.getElementById) { navRoot = document.getElementById('nav'); for (i=0; i<navRoot.childNodes.length; i++) { n; 管理员回复：这次好像有点明白了，是没有设置背景颜色的问题，不是层的问题。

selfishjea(121.0.*.*) 发表于：2009-05-07 14:56:14: li { float:left; width:100px;}；第一级菜单向左浮动了，但是为什么第二级同样是li的，却没有向左浮动？呵呵; 管理员回复：因为LI的宽度是100px，而第二级的li在第一级的li下边，宽度也是100px，正好够放一个li所以第二个就排在第一个下面了。形式竖排形式。

vv(61.142.*.*) 发表于：2009-05-06 21:59:13: 定义了ul还要id='nav'??因为没有看到nav的css样式定义，所以觉得很奇怪~; 管理员回复：在实际制作网站时，要用ID的，不能用现在的样式，因为现在的样子将定义全局样式，影响到其它的。

allan(218.17.*.*) 发表于：2009-05-06 13:24:20: 就是导航显示出来啊.我把你上面的代码加套了个层1及设置层的高度.然后我在下面在重新加个层2.上面的导航下拉列表就显示在层2下面了(就是层2遮挡了.明白了吗?); 管理员回复：不是跑上边了，而没有背景色重叠了。你在ul li a上添加 background:#fff;再看看效果。

allan(218.18.*.*) 发表于：2009-05-05 18:37:27: 为为什么我给套个div设置高度后,下面在加个层.他就显示不出来(在后面).但是如果不加套的话.鼠标放上去他就会往下延伸,占用空间; 管理员回复：不太明白你的意思

小豆子(202.100.*.*) 发表于：2009-04-29 17:29:39: 你好，有个疑问哦：li { float:left; width:100px;}；文章 CSS教程 DOM教程 XML教程 FLASH教程为什么“文章”这一级的li都是向左浮动，横向布局，而里面嵌套的“CSS教程”这一级li却是纵向排列的呢？谢谢啦~~; 管理员回复：因为这一级向左浮动才会横向排列，子菜单没有浮动，所以纵向排列

yali(60.30.*.*) 发表于：2009-04-17 16:00:27: 讲得真好，我不明白li:hover ul,li.over ul { display:block;}中，li.over是什么意思呢？能给解释一下吗？; 管理员回复：它是定义class为over的li元素

花儿(219.237.*.*) 发表于：2009-04-15 19:08:26: 去掉部分。好像没有变化。这段有什么用呢？; 管理员回复：哪部分？有部分是为了兼容浏览器的

Guest(61.184.*.*) 发表于：2008-12-17 22:40:44: li ul { display:none; top:20px;}的top:20px我改动后貌似没有变化啊?IE7; 管理员回复：left在相对定位或绝对定位时才有效。回头再仔细看看是什么问题。睡觉了

手心太阳(218.242.*.*) 发表于：2008-12-16 17:56:14: 请问管理员:我再表格里插入这段代码后。我发现表格随下拉菜单下拉而加长。。。能帮我解决这个问题吗？我的意思就是，能不能有什么方法让导航固定，然后他的下拉菜单再下个表格的上面，而不是把表格撑开.。谢谢; 管理员回复：请看这个例子，http://www.aa25.cn/393.shtml解决了挤跑的问题

手心太阳(218.242.*.*) 发表于：2008-12-16 16:44:46: #nav { height:26px; border-bottom:2px solid #2788da;}我再导航下面加跟线为什么就下拉菜单能显示但是鼠标放上去就没; 管理员回复：这个要看你具体是怎么加的哟

jinyc(60.179.*.*) 发表于：2008-12-11 22:16:11: 谢谢回答。只加了一个div，然后给div设定了一个高度，就这些代码，应该不会错。其实主要是搞不懂为什么加了背景之后就可以了（IE7）。呵呵。; 管理员回复：应该和背景没有多大关系的

jinyc(125.114.*.*) 发表于：2008-12-11 10:01:15: 今天用的时候发现一个奇快的问题，在最外面的ul套一个div，如果这个div设定高度的话将会出以下问题：下拉菜单是可以出来的，但是鼠标还未移到下拉菜单上面，它已经消失了（IE7）。如果你给一级菜单设置一个背景色，又可以用了。不是很明白为什么会有这种情况。可以有其他解决途径吗（就是不要给li加背景色，因为加背景色的灵活性不高，在一些场合不是很好用）。麻烦了，谢谢！; 管理员回复：那还是代码写的有问题

jinyc(60.179.*.*) 发表于：2008-12-08 22:43:55: 很好，收藏了。; 管理员回复：谢谢啦

Guest(58.38.*.*) 发表于：2008-12-04 17:05:54: 运行时，只有当有下拉菜单的导航鼠标不放到字体上会改变背景，而没有下拉菜单的就必须要鼠标放到字体上才能改变背景颜色，而且下拉菜单中的多必须要放到字体上才能改变背景颜色。要怎么样才能解决他，让他不用放到字体上也能改变背景颜色呢？请教一下！; 管理员回复：不知道你用的什么浏览器，如果li不设置宽度的话，在IE6下鼠标需放到文字上才能显示背景，如果设置宽度的话，在IE6下和其它标准浏览器一样，鼠标放到A的范围内即可。至于没设宽度的情况，本人暂时还没有找到解决办法。

巫云(218.58.*.*) 发表于：2008-12-03 16:31:33: li:hover ul,li.over ul { display:block;}这个改成li.over ul { display:block;}好像效果没变啊……; 管理员回复：你把js代码去掉后，在标准的dom浏览器中照样可以执行，而在IE6下就不行了，这个是标准的写法，而li.over ul和js部分是为了兼容IE6的。

问题(59.173.*.*) 发表于：2008-08-20 11:21:35: li:hover ul,li.over ul { display:block;}中的li.over ul 怎么解释？li:hover ul这个应该是鼠标滑过的效果吧; 管理员回复：这个是和js相关的

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

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

我要评论

推荐文章

热门文章

最新图片素材

最新评论文章

在线交流QQ群

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

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

我要评论

推荐文章

热门文章

最新图片素材

最新评论文章

在线交流QQ群

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