全兼容的标准三级菜单

关注

转载最新推荐文章于 2026-07-25 16:14:41 发布 902 阅读 AI 写同款· GEO 优化 ›

AI权益加码！Claude Code、Cursor等20+工具免费用！购周边限时加赠Coding Plan Lite，畅享主流AI工具！学习进阶更高效！阅读详情

首先，说明一下这不是纯CSS的，如果要用纯CSS实现的话要用到很多[if IE 6]的判断，感觉页面的标签很乱，个人不太喜欢。说到底还是因为这万恶的IE6,基本上问题都是出在这里，本例用的是JS，但也用了一个[if IE 6]的判断，用来在IE6下改变标签的class。虽然是用了JS，但页面结构却清爽得多。

可能有些朋友见过，原本是在一个国外网站上看到的，不过写得有点复杂，我简化了一下，帖上来。<!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=utf-8" /> <title>三级菜单</title> <mce:script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js" mce_src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></mce:script> </mce:script> <![endif]--> <mce:script type="text/javascript" src="js/jquery.js" mce_src="js/jquery.js"></mce:script> <mce:style type="text/css"></mce:style><style type="text/css" mce_bogus="1">ul { padding:0; margin:0;} #navmenu {margin:0px; width:160px;} #navmenu li {margin:0px; width:160px; list-style-type:none;} #navmenu ul {margin:0px; width:160px;} #navmenu li {float:left; width:100%; position:relative;} #navmenu li.iehover {z-index:1000;} #navmenu ul {display:none; z-index:9999; left:100%; position:absolute; top:0px;} #navmenu a {padding:10px 6px; border-right:#FFF 1px solid; border-top:#FFF 1px solid; display: block; background:#DDD; color:#666; text-decoration:none;} #navmenu a:hover {background:#BBB; color:#FFF;} #navmenu li:hover ul ul {display:none;} #navmenu li.iehover ul ul {display:none;} #navmenu li:hover ul {display:block;} #navmenu ul li:hover ul {display:block;} #navmenu ul ul li:hover ul {display:block;} #navmenu li.iehover ul {display:block;} #navmenu ul li.iehover ul {display:block;} #navmenu ul ul li.iehover ul {display:block;}</style> </head> <body> <div id="content"> <ul id="navmenu"> <li><a href="#" mce_href="#">Home</a> </li> <li><a href="#" mce_href="#">Work +</a> <ul> <li><a href="#" mce_href="#">Websites +</a> <ul> <li><a href="#" mce_href="#">qrayg.com</a> </li> <li><a href="#" mce_href="#">craigerskine.com</a></li> <li><a href="#" mce_href="#">dt.qrayg.com</a></li> <li><a href="#" mce_href="#">legendofmana.info</a> </li></ul></li> <li><a href="#" mce_href="#">Sketchbook</a> </li> <li><a href="#" mce_href="#">Free Interfaces</a> </li> </ul></li> <li><a href="#" mce_href="#">Learn +</a> <ul> <li><a href="#" mce_href="#">Fireworks +</a> <ul> <li><a href="#" mce_href="#">Aqua Button</a> </li> <li><a href="#" mce_href="#">Aqua Button 2</a></li> <li><a href="#" mce_href="#">Water Drop</a> </li> <li><a href="#" mce_href="#">Light FX</a> </li> <li><a href="#" mce_href="#">Light FX2</a></li> </ul></li> <li><a href="#" mce_href="#">CSS +</a> <ul> <li><a href="#" mce_href="#">CSS Menus</a> </li> <li><a href="#" mce_href="#">Sprite Nav</a> </li> <li><a href="#" mce_href="#">@import</a></li> </ul></li></ul></li> <li><a href="#" mce_href="#">Contact</a> </li></ul> </div> </body> </html>

收录于