答案：一个DIV+CSS菜单，兼容Firefox,分享给大家，大家一齐学习 运行代码框<!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>Div+CSS+JS树型菜单，可刷新</title><meta name="description" content="http://www.livepo.com"><style type="text/css"><!--*{margin:0;padding:0;border:0;}body {font-family: arial, 宋体, serif;font-size:12px;}#nav {width:180px; line-height: 24px; list-style-type: none;text-align:left; /*定义整个ul菜单的行高和背景色*/}/*==================一级目录===================*/#nav a {width: 160px; display: block;padding-left:20px;/*Width(一定要)，否则下面的Li会变形*/}#nav li {background:#CCC; /*一级目录的背景色*/border-bottom:#FFF 1px solid; /*下面的一条白边*/float:left;/*float：left,本不应该设置，但由于在Firefox不能正常显示继承Nav的width,限制宽度，li自动向下延伸*/}#nav li a:hover{background:#CC0000;/*一级目录onMouseOver显示的背景色*/}#nav a:link {color:#666; text-decoration:none;}#nav a:visited {color:#666;text-decoration:none;}#nav a:hover {color:#FFF;text-decoration:none;font-weight:bold;}/*==================二级目录===================*/#nav li ul {list-style:none;text-align:left;}#nav li ul li{background: #EBEBEB; /*二级目录的背景色*/}#nav li ul a{ padding-left:20px; width:160px;/* padding-left二级目录中文字向右移动，但Width必须重新设置=(总宽度-padding-left)*/}/*下面是二级目录的链接样式*/#nav li ul a:link {color:#666; text-decoration:none;}#nav li ul a:visited {color:#666;text-decoration:none;}#nav li ul a:hover {color:#F3F3F3;text-decoration:none;font-weight:normal;background:#CC0000;/* 二级onmouseover的字体颜色、背景色*/}/*==============================*/#nav li:hover ul {left: auto;}#nav li.sfhover ul {left: auto;}#content {clear: left; }#nav ul.collapsed {display: none;}-->#PARENT{width:300px;padding-left:20px;}</style></head><body><div id="PARENT"><ul id="nav"><li><a href=><BR><INPUT onclick=runCode() type=button value=运行代码> [Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]</SPAN></P><P><SPAN></SPAN> </P><P><SPAN>xp风格菜单</SPAN></P><SPAN><P>运行代码框<BR><SPAN><TEXTAREA class=codeTextarea rows=10 cols=64><html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312"><style type="text/css">body { }body.menu { background:#383757; margin:0px; font-family:"Arial", "Helvetica", "sans-serif"; font-size:8pt; }table.menu { border:0px; font-family:"Arial", "Helvetica", "sans-serif"; font-size:8pt; }td.menu { font-family:"Arial", "Helvetica", "sans-serif"; font-size:8pt; }img.menu { vertical-align:bottom; border:0px; }a.menu { font-family:"Arial", "Helvetica", "sans-serif"; font-size:8pt; color:#215DC6; text-decoration:none; }a:hover.menu { font-size:8pt;color:#428EFF;font-family:"Arial", "Helvetica", "sans-serif"; }.sec_menu { border-left:1px solid gray; border-right:1px solid gray; border-bottom:1px solid gray; overflow:hidden; background:#f8f8f8; }.menu_title {font-family:"Arial", "Helvetica", "sans-serif"; font-size:8pt }.menu_title span { position:relative; top:2px; left:8px; color:#494949; font-weight:bold;font-family:"Arial", "Helvetica", "sans-serif"; font-size:8pt}.menu_title2 {font-family:"Arial", "Helvetica", "sans-serif"; font-size:8pt }.menu_title2 span { position:relative; top:2px; left:8px; color:#428EFF; font-weight:bold; cursor:hand;font-family:"Arial", "Helvetica", "sans-serif"; font-size:8pt}a:link {font-family: Arial, Helvetica, sans-serif;font-size: 11px;color: #000000;text-decoration: none;}a:visited {font-family: Arial, Helvetica, sans-serif;font-size: 11px;color: #000000;text-decoration: none;}a:hover {font-family: Arial, Helvetica, sans-serif;font-size: 11px;color: #CCCCCC;text-decoration: none;}</style><!--Start XP Style Menu--><SCRIPT LANGUAGE="Javascript" DEFER="TRUE"> <!--var menuinit=new Array(50),vers;//</pre><p>上一个：<a href="/show/9943130e5fe7b9f6.htm">仿淘宝网站的导航标签效果！</a><br/>下一个：<a href="/show/91808c286ad20232.htm">web2.0中通过li 列表信息怎么实现一行多列?</a></p><div class="piclist">更多图片编程知识:<ul><li><a href="/show/84729fabb9062496.htm"><img src='/upload/2013111519/20130219064921416.jpg' width=105 height=105><br/>设计是让用户觉得好用，而不是好看</a></li><li><a href="/show/87a888b0b80eeefd.htm"><img src='/upload/2013111519/20130108025349901.jpg' width=105 height=105><br/>2013年10大Web设计趋势 响应式设计、内容依旧为王</a></li><li><a href="/show/b90fa6db7a0cef42.htm"><img src='/upload/2013111519/20121110114208824.jpg' width=105 height=105><br/>使用css制作三角，兼容IE6，用到的标签<div><s><span></a></li><li><a href="/show/abcc541aa1504727.htm"><img src='/upload/2013111519/20121028043215648.jpg' width=105 height=105><br/>7大主流B2C首页导航栏设计对比分析</a></li><li><a href="/show/a47ef3e04b27a399.htm"><img src='/upload/2013111519/20120217050904518.jpg' width=105 height=105><br/>为什么空白区域在网页设计中是重要的</a></li><li><a href="/show/d57997c7db12f570.htm"><img src='/upload/20131207/xhtml_frame-2.gif' width=105 height=105><br/>XHTML 框架 frameset 标签</a></li></ul></div></div> <div class="zykmore"><script type="text/javascript" src="/js/s4.js"></script></div><div class="more"><dl><dt>更多<a href="/list/20_1.htm">html/css</a>疑问解答：</dt><dd><a target="_blank" href="/show/f0abaa265941e3c4.htm">div+css中关于ie浏览器中非啊元素的：hover的实现问题，哪位大神指点下啊</a></dd><dd><a target="_blank" href="/show/1d490bcbf845df42.htm">css jquery代码中为什么宽度这样设定.menu li ul 150px;.menu li ul a 110px;.menu li a中padding的20px</a></dd><dd><a target="_blank" href="/show/30fc49ffb65095fd.htm">css 属性选择器 ie6 不支持吗？</a></dd><dd><a target="_blank" href="/show/444e0d933ece33d2.htm">用css、jquery做的选项卡效果，有一个小疑问，请高手指点，代码如下：</a></dd><dd><a target="_blank" href="/show/5ec69e3e254c31bd.htm">介绍本学习css的书</a></dd><dd><a target="_blank" href="/show/274696a075ea0ad6.htm">wordpress多个CSS样式怎么调用？</a></dd><dd><a target="_blank" href="/show/ab96793bdf130c30.htm">这个div 的css是如何编写的</a></dd><dd><a target="_blank" href="/show/997828f54b6aaf75.htm">div+css中，div的右边框小于div的高度且居中，除了用背景图片，如何实现？</a></dd><dd><a target="_blank" href="/show/3fe6f53e6871f210.htm">表格立体感用CSS怎么写 我要 具体代码 写仔细 分段的 谢谢 了 兄弟 还有 下拉列表框 立体感用CSS 怎么写</a></dd><dd><a target="_blank" href="/show/a50fb65de28b11cf.htm">CSS 在一个大的DIV里面，另一个DIV怎么居中并置底。</a></dd><dd><a target="_blank" href="/show/b7069a9e10783e31.htm">dw中html文档为什么无法链接css文档</a></dd><dd><a target="_blank" href="/show/a754f4de9f8673a9.htm">设计一个小例子说明DIV+CSS的优势（例子要解释并注释）。</a></dd><dd><a target="_blank" href="/show/c4dc365c19005b78.htm">我会html css目前正在学js，打算在大三的寒假找个实习，请问应该找哪方面的实习？</a></dd><dd><a target="_blank" href="/show/2254e9fc1e4ecb65.htm">css问题，跪求大大帮忙</a></dd><dd><a target="_blank" href="/show/c0e820d5407b3236.htm">请教网页设计高手，如下图的这种css代码怎么写？</a></dd></dl></div> </div> <div id="zykleft"> <div class="leftm"> <div id="logo"><a href="http://www.zzzyk.com/">站长资源库</a> <div class="clear"></div><script type="text/javascript" src="/js/i7f.js"></script></div> <script type="text/javascript" src="/js/sharen.js"></script><div class="clear"></div> <dl class="list"><dd><a href="/list/1_1.htm">asp</a></dd><dd><a href="/list/2_1.htm">php</a></dd><dd><a href="/list/3_1.htm">Delphi</a></dd><dd><a href="/list/4_1.htm">Matlab</a></dd><dd><a href="/list/5_1.htm">JSP</a></dd><dd><a href="/list/6_1.htm">Foxpro</a></dd><dd><a href="/list/7_1.htm">JS</a></dd><dd><a href="/list/8_1.htm">C/C++</a></dd><dd><a href="/list/9_1.htm">C#/ASP.NET</a></dd><dd><a href="/list/10_1.htm">VC++</a></dd><dd><a href="/list/11_1.htm">JAVA</a></dd><dd><a href="/list/12_1.htm">VB</a></dd><dd><a href="/list/13_1.htm">汇编语言</a></dd><dd><a href="/list/20_1.htm">html/css</a></dd><dd><a href="/list/21_1.htm">CGI</a></dd><dd><a href="/list/23_1.htm">XML/UML</a></dd><dd><a href="/list/24_1.htm">wap</a></dd><dd><a href="/list/27_1.htm">网站相关</a></dd><dd><a href="/list/60_1.htm">网页素材</a></dd><dd><a href="/list/70_1.htm">python</a></dd><dd><a href="/list/71_1.htm">微信小程序</a></dd><dd><a href="/list/72_1.htm">thinkphp</a></dd></dl><dl class="notice">如果你遇到<a href="/default.htm">编程学习</a>难题：<br/>访问www.zzzyk.com 试试</dl> </div> <div class="leftm"><dl><dt><script type="text/javascript" src="/js/s5.js"></script></dt></dl></div> <div class="leftm"><dl><dt><script type="text/javascript" src="/js/s6.js"></script></dt></dl></div> </div></div> <div class="clear"></div> <div class="bdshare"> <script type="text/javascript" src="/js/share.js"></script> </div> <div class="clear"></div> <div class="foot">CopyRight © 2022 站长资源库 编程知识问答 zzzyk.com All Rights Reserved<br/>部分文章来自网络，<script type="text/javascript" src="/images/my.js"></script> </div> </body> </html>
一个DIV+CSS菜单，兼容Firefox,分享给大家，大家一齐学习
运行代码框<!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>Div+CSS+JS树型菜单，可刷新</title><meta name="description" content="http://www.livepo.com"><style type="text/css"><!--*{margin:0;padding:0;border:0;}body {font-family: arial, 宋体, serif;font-size:12px;}#nav {width:180px; line-height: 24px; list-style-type: none;text-align:left; /*定义整个ul菜单的行高和背景色*/}/*==================一级目录===================*/#nav a {width: 160px; display: block;padding-left:20px;/*Width(一定要)，否则下面的Li会变形*/}#nav li {background:#CCC; /*一级目录的背景色*/border-bottom:#FFF 1px solid; /*下面的一条白边*/float:left;/*float：left,本不应该设置，但由于在Firefox不能正常显示继承Nav的width,限制宽度，li自动向下延伸*/}#nav li a:hover{background:#CC0000;/*一级目录onMouseOver显示的背景色*/}#nav a:link {color:#666; text-decoration:none;}#nav a:visited {color:#666;text-decoration:none;}#nav a:hover {color:#FFF;text-decoration:none;font-weight:bold;}/*==================二级目录===================*/#nav li ul {list-style:none;text-align:left;}#nav li ul li{background: #EBEBEB; /*二级目录的背景色*/}#nav li ul a{ padding-left:20px; width:160px;/* padding-left二级目录中文字向右移动，但Width必须重新设置=(总宽度-padding-left)*/}/*下面是二级目录的链接样式*/#nav li ul a:link {color:#666; text-decoration:none;}#nav li ul a:visited {color:#666;text-decoration:none;}#nav li ul a:hover {color:#F3F3F3;text-decoration:none;font-weight:normal;background:#CC0000;/* 二级onmouseover的字体颜色、背景色*/}/*==============================*/#nav li:hover ul {left: auto;}#nav li.sfhover ul {left: auto;}#content {clear: left; }#nav ul.collapsed {display: none;}-->#PARENT{width:300px;padding-left:20px;}</style></head><body><div id="PARENT"><ul id="nav"><li><a href=><BR><INPUT onclick=runCode() type=button value=运行代码> [Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]</SPAN></P><P><SPAN></SPAN> </P><P><SPAN>xp风格菜单</SPAN></P><SPAN><P>运行代码框<BR><SPAN><TEXTAREA class=codeTextarea rows=10 cols=64><html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312"><style type="text/css">body { }body.menu { background:#383757; margin:0px; font-family:"Arial", "Helvetica", "sans-serif"; font-size:8pt; }table.menu { border:0px; font-family:"Arial", "Helvetica", "sans-serif"; font-size:8pt; }td.menu { font-family:"Arial", "Helvetica", "sans-serif"; font-size:8pt; }img.menu { vertical-align:bottom; border:0px; }a.menu { font-family:"Arial", "Helvetica", "sans-serif"; font-size:8pt; color:#215DC6; text-decoration:none; }a:hover.menu { font-size:8pt;color:#428EFF;font-family:"Arial", "Helvetica", "sans-serif"; }.sec_menu { border-left:1px solid gray; border-right:1px solid gray; border-bottom:1px solid gray; overflow:hidden; background:#f8f8f8; }.menu_title {font-family:"Arial", "Helvetica", "sans-serif"; font-size:8pt }.menu_title span { position:relative; top:2px; left:8px; color:#494949; font-weight:bold;font-family:"Arial", "Helvetica", "sans-serif"; font-size:8pt}.menu_title2 {font-family:"Arial", "Helvetica", "sans-serif"; font-size:8pt }.menu_title2 span { position:relative; top:2px; left:8px; color:#428EFF; font-weight:bold; cursor:hand;font-family:"Arial", "Helvetica", "sans-serif"; font-size:8pt}a:link {font-family: Arial, Helvetica, sans-serif;font-size: 11px;color: #000000;text-decoration: none;}a:visited {font-family: Arial, Helvetica, sans-serif;font-size: 11px;color: #000000;text-decoration: none;}a:hover {font-family: Arial, Helvetica, sans-serif;font-size: 11px;color: #CCCCCC;text-decoration: none;}</style><!--Start XP Style Menu--><SCRIPT LANGUAGE="Javascript" DEFER="TRUE"> <!--var menuinit=new Array(50),vers;//</pre><p>上一个：<a href="/show/9943130e5fe7b9f6.htm">仿淘宝网站的导航标签效果！</a><br/>下一个：<a href="/show/91808c286ad20232.htm">web2.0中通过li 列表信息怎么实现一行多列?</a></p><div class="piclist">更多图片编程知识:<ul><li><a href="/show/84729fabb9062496.htm"><img src='/upload/2013111519/20130219064921416.jpg' width=105 height=105><br/>设计是让用户觉得好用，而不是好看</a></li><li><a href="/show/87a888b0b80eeefd.htm"><img src='/upload/2013111519/20130108025349901.jpg' width=105 height=105><br/>2013年10大Web设计趋势 响应式设计、内容依旧为王</a></li><li><a href="/show/b90fa6db7a0cef42.htm"><img src='/upload/2013111519/20121110114208824.jpg' width=105 height=105><br/>使用css制作三角，兼容IE6，用到的标签<div><s><span></a></li><li><a href="/show/abcc541aa1504727.htm"><img src='/upload/2013111519/20121028043215648.jpg' width=105 height=105><br/>7大主流B2C首页导航栏设计对比分析</a></li><li><a href="/show/a47ef3e04b27a399.htm"><img src='/upload/2013111519/20120217050904518.jpg' width=105 height=105><br/>为什么空白区域在网页设计中是重要的</a></li><li><a href="/show/d57997c7db12f570.htm"><img src='/upload/20131207/xhtml_frame-2.gif' width=105 height=105><br/>XHTML 框架 frameset 标签</a></li></ul></div></div> <div class="zykmore"><script type="text/javascript" src="/js/s4.js"></script></div><div class="more"><dl><dt>更多<a href="/list/20_1.htm">html/css</a>疑问解答：</dt><dd><a target="_blank" href="/show/f0abaa265941e3c4.htm">div+css中关于ie浏览器中非啊元素的：hover的实现问题，哪位大神指点下啊</a></dd><dd><a target="_blank" href="/show/1d490bcbf845df42.htm">css jquery代码中为什么宽度这样设定.menu li ul 150px;.menu li ul a 110px;.menu li a中padding的20px</a></dd><dd><a target="_blank" href="/show/30fc49ffb65095fd.htm">css 属性选择器 ie6 不支持吗？</a></dd><dd><a target="_blank" href="/show/444e0d933ece33d2.htm">用css、jquery做的选项卡效果，有一个小疑问，请高手指点，代码如下：</a></dd><dd><a target="_blank" href="/show/5ec69e3e254c31bd.htm">介绍本学习css的书</a></dd><dd><a target="_blank" href="/show/274696a075ea0ad6.htm">wordpress多个CSS样式怎么调用？</a></dd><dd><a target="_blank" href="/show/ab96793bdf130c30.htm">这个div 的css是如何编写的</a></dd><dd><a target="_blank" href="/show/997828f54b6aaf75.htm">div+css中，div的右边框小于div的高度且居中，除了用背景图片，如何实现？</a></dd><dd><a target="_blank" href="/show/3fe6f53e6871f210.htm">表格立体感用CSS怎么写 我要 具体代码 写仔细 分段的 谢谢 了 兄弟 还有 下拉列表框 立体感用CSS 怎么写</a></dd><dd><a target="_blank" href="/show/a50fb65de28b11cf.htm">CSS 在一个大的DIV里面，另一个DIV怎么居中并置底。</a></dd><dd><a target="_blank" href="/show/b7069a9e10783e31.htm">dw中html文档为什么无法链接css文档</a></dd><dd><a target="_blank" href="/show/a754f4de9f8673a9.htm">设计一个小例子说明DIV+CSS的优势（例子要解释并注释）。</a></dd><dd><a target="_blank" href="/show/c4dc365c19005b78.htm">我会html css目前正在学js，打算在大三的寒假找个实习，请问应该找哪方面的实习？</a></dd><dd><a target="_blank" href="/show/2254e9fc1e4ecb65.htm">css问题，跪求大大帮忙</a></dd><dd><a target="_blank" href="/show/c0e820d5407b3236.htm">请教网页设计高手，如下图的这种css代码怎么写？</a></dd></dl></div> </div> <div id="zykleft"> <div class="leftm"> <div id="logo"><a href="http://www.zzzyk.com/">站长资源库</a> <div class="clear"></div><script type="text/javascript" src="/js/i7f.js"></script></div> <script type="text/javascript" src="/js/sharen.js"></script><div class="clear"></div> <dl class="list"><dd><a href="/list/1_1.htm">asp</a></dd><dd><a href="/list/2_1.htm">php</a></dd><dd><a href="/list/3_1.htm">Delphi</a></dd><dd><a href="/list/4_1.htm">Matlab</a></dd><dd><a href="/list/5_1.htm">JSP</a></dd><dd><a href="/list/6_1.htm">Foxpro</a></dd><dd><a href="/list/7_1.htm">JS</a></dd><dd><a href="/list/8_1.htm">C/C++</a></dd><dd><a href="/list/9_1.htm">C#/ASP.NET</a></dd><dd><a href="/list/10_1.htm">VC++</a></dd><dd><a href="/list/11_1.htm">JAVA</a></dd><dd><a href="/list/12_1.htm">VB</a></dd><dd><a href="/list/13_1.htm">汇编语言</a></dd><dd><a href="/list/20_1.htm">html/css</a></dd><dd><a href="/list/21_1.htm">CGI</a></dd><dd><a href="/list/23_1.htm">XML/UML</a></dd><dd><a href="/list/24_1.htm">wap</a></dd><dd><a href="/list/27_1.htm">网站相关</a></dd><dd><a href="/list/60_1.htm">网页素材</a></dd><dd><a href="/list/70_1.htm">python</a></dd><dd><a href="/list/71_1.htm">微信小程序</a></dd><dd><a href="/list/72_1.htm">thinkphp</a></dd></dl><dl class="notice">如果你遇到<a href="/default.htm">编程学习</a>难题：<br/>访问www.zzzyk.com 试试</dl> </div> <div class="leftm"><dl><dt><script type="text/javascript" src="/js/s5.js"></script></dt></dl></div> <div class="leftm"><dl><dt><script type="text/javascript" src="/js/s6.js"></script></dt></dl></div> </div></div> <div class="clear"></div> <div class="bdshare"> <script type="text/javascript" src="/js/share.js"></script> </div> <div class="clear"></div> <div class="foot">CopyRight © 2022 站长资源库 编程知识问答 zzzyk.com All Rights Reserved<br/>部分文章来自网络，<script type="text/javascript" src="/images/my.js"></script> </div> </body> </html>