<strong>方式一：直接编写代码实现</strong> <br>效果如下： <br><img src="http://files.jb51.net/upload/201008/20100807165719894.gif" border="0" alt="纯CSS打造的导航菜单(附jquery版)_jquery" ><br>代码如下： <br><div class="codetitle"> <span><a style="CURSOR: pointer" data="20953" class="copybut" id="copybut20953" onclick="doCopy('code20953')"><u>复制代码</u></a></span> 代码如下:</div> <div class="codebody" id="code20953"> <br><html> <br><head> <br><title>无需表格的菜单</title> <br><style> <br><!-- <BR>body{ <BR>background-color:#ffdee0; <BR>} <BR>#navigation { <BR>width:200px; <BR>font-family:Arial; <BR>} <BR>#navigation ul { <BR>list-style-type:none; /* 不显示项目符号 */ <BR>margin:0px; <BR>padding:0px; <BR>} <BR>#navigation li { <BR>border-bottom:1px solid #ED9F9F; /* 添加下划线 */ <BR>} <BR>#navigation li a{ <BR>display:block; /* 区块显示 */ <BR>padding:5px 5px 5px 0.5em; <BR>text-decoration:none; <BR>border-left:12px solid #711515; /* 左边的粗红边 */ <BR>border-right:1px solid #711515; /* 右侧阴影 */ <BR>width:175px; /* xg_超连接以外的部分也触发CSS样式效果 */ <BR>} <BR>#navigation li a:link, #navigation li a:visited{ <BR>background-color:#c11136; <BR>color:#FFFFFF; <BR>} <BR>#navigation li a:hover{ /* 鼠标经过时 */ <BR>background-color:#990020; /* 改变背景色 */ <BR>color:#ffff00; /* 改变文字颜色 */ <BR>} <BR>--> <br></style> <br></head> <br><body> <br><div id="navigation"> <br><ul> <br><li><a href="#">Home</a></li> <br><li><a href="#">News</a></li> <br><li><a href="#">Sports</a></li> <br><li><a href="#">Weather</a></li> <br><li><a href="#">Contact Me</a></li> <br></ul> <br></div> <br></body> <br></html> <br> </div> <br><strong>方式二：使用jQuery 代码实现</strong> <br>代码如下： <br><div class="codetitle"> <span><a style="CURSOR: pointer" data="12667" class="copybut" id="copybut12667" onclick="doCopy('code12667')"><u>复制代码</u></a></span> 代码如下:</div> <div class="codebody" id="code12667"> <br><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <br><html> <br><head> <br><title>伸缩的菜单，用toggle()重写</title> <br><style> <br><!-- <BR>body{ <BR>background-color:#ffdee0; <BR>} <BR>#navigation { <BR>width:200px; <BR>font-family:Arial; <BR>} <BR>#navigation > ul { <br>list-style-type:none; /* 不显示项目符号 */ <br>margin:0px; <br>padding:0px; <br>} <br>#navigation > ul > li { <br>border-bottom:1px solid #ED9F9F; /* 添加下划线 */ <br>} <br>#navigation > ul > li > a{ <br>display:block; /* 区块显示 */ <br>padding:5px 5px 5px 0.5em; <br>text-decoration:none; <br>border-left:12px solid #711515; /* 左边的粗红边 */ <br>border-right:1px solid #711515; /* 右侧阴影 */ <br>} <br>#navigation > ul > li > a:link, #navigation > ul > li > a:visited{ <br>background-color:#c11136; <br>color:#FFFFFF; <br>} <br>#navigation > ul > li > a:hover{ /* 鼠标经过时 */ <br>background-color:#990020; /* 改变背景色 */ <br>color:#ffff00; /* 改变文字颜色 */ <br>} <br>/* 子菜单的CSS样式 */ <br>#navigation ul li ul{ <br>list-style-type:none; <br>margin:0px; <br>padding:0px 0px 0px 0px; <br>} <br>#navigation ul li ul li{ <br>border-top:1px solid #ED9F9F; <br>} <br>#navigation ul li ul li a{ <br>display:block; <br>padding:3px 3px 3px 0.5em; <br>text-decoration:none; <br>border-left:28px solid #a71f1f; <br>border-right:1px solid #711515; <br>} <br>#navigation ul li ul li a:link, #navigation ul li ul li a:visited{ <br>background-color:#e85070; <br>color:#FFFFFF; <br>} <br>#navigation ul li ul li a:hover{ <br>background-color:#c2425d; <br>color:#ffff00; <br>} <br>--> <br></style> <br><script language="javascript" src="jquery.min.js"></script> <br><script language="javascript"> <br>$(function(){ <br>$("li").find("ul").prev().click(function(){ <br>$(this).next().toggle(); <br>}); <br>$("li:has(ul)").find("ul").hide(); <br>}); <br></script> <br></head> <br><body> <br><div id="navigation"> <br><ul id="listUL"> <br><li><a href="#">Home</a></li> <br><li><a href="#">News</a> <br><ul> <br><li><a href="#">Lastest News</a></li> <br><li><a href="#">All News</a></li> <br></ul> <br></li> <br><li><a href="#">Sports</a> <br><ul> <br><li><a href="#">Basketball</a></li> <br><li><a href="#">Football</a></li> <br><li><a href="#">Volleyball</a></li> <br></ul> <br></li> <br><li><a href="#">Weather</a> <br><ul> <br><li><a href="#">Today's Weather</a></li> <br><li><a href="#">Forecast</a></li> <br></ul> <br></li> <br><li><a href="#">Contact Me</a></li> <br></ul> <br></div> <br></body> <br></html> <br> </div> <br>注意：该代码必须加载了jquery.min.js 文件，并且所写的CSS 只能在Firefox 浏览器中正常显示。
