代碼如下：
<!DOCTYPE html PUBliC "-//W3C//DTD XHTML 1.0 Transitional//EN"</p><p>"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br /><html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN"><br /><head><br /><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><br /><title>css菜單示範</title></p><p><style type="text/css"><br /><!--</p><p>*{margin:0;padding:0;border:0;}<br />body {<br />font-family: arial, 宋體, serif;<br />font-size:12px;<br />}</p><p>#nav {<br />line-height: 24px; list-style-type: none; background:#666;<br />}</p><p>#nav a {<br />display: block; width: 80px; text-align:center;<br />}</p><p>#nav a:link {<br />color:#666; text-decoration:none;<br />}<br />#nav a:visited {<br />color:#666;text-decoration:none;<br />}<br />#nav a:hover {<br />color:#FFF;text-decoration:none;font-weight:bold;<br />}</p><p>#nav li {<br />float: left; width: 80px; background:#CCC;<br />}<br />#nav li a:hover{<br />background:#999;<br />}<br />#nav li ul {<br />line-height: 27px; list-style-type: none;text-align:left;<br />left: -999em; width: 180px; position: absolute;<br />}<br />#nav li ul li{<br />float: left; width: 180px;<br />background: #F6F6F6;<br />}</p><p>#nav li ul a{<br />display: block; width: 156px;text-align:left;padding-left:24px;<br />}</p><p>#nav li ul a:link {<br />color:#666; text-decoration:none;<br />}<br />#nav li ul a:visited {<br />color:#666;text-decoration:none;<br />}<br />#nav li ul a:hover {<br />color:#F3F3F3;text-decoration:none;font-weight:normal;<br />background:#C00;<br />}</p><p>#nav li:hover ul {<br />left: auto;<br />}<br />#nav li.sfhover ul {<br />left: auto;<br />}<br />#content {<br />clear: left;<br />}</p><p>--><br /></style></p><p><script type=text/javascript><!--//--><![CDATA[//><!--<br />function menuFix() {<br />var sfEls = document.getElementById("nav").getElementsByTagName("li");<br />for (var i=0; i<sfEls.length; i++) {<br />sfEls[i].onmouseover=function() {<br />this.className+=(this.className.length>0? " ": "") + "sfhover";<br />}<br />sfEls[i].onMouseDown=function() {<br />this.className+=(this.className.length>0? " ": "") + "sfhover";<br />}<br />sfEls[i].onMouseUp=function() {<br />this.className+=(this.className.length>0? " ": "") + "sfhover";<br />}<br />sfEls[i].onmouseout=function() {<br />this.className=this.className.replace(new RegExp("( ?|^)sfhover\\b"),</p><p>"");<br />}<br />}<br />}<br />window.onload=menuFix;</p><p>//--><!]]></script></p><p></head><br /><body></p><p><ul id="nav"><br /><li><a href="#">產品介紹</a><br /><ul><br /><li><a href="#">產品一</a></li><br /><li><a href="#">產品一</a></li><br /><li><a href="#">產品一</a></li><br /><li><a href="#">產品一</a></li><br /><li><a href="#">產品一</a></li><br /><li><a href="#">產品一</a></li><br /></ul><br /></li><br /><li><a href="#">服務介紹</a><br /><ul><br /><li><a href="#">服務二</a></li><br /><li><a href="#">服務二</a></li><br /><li><a href="#">服務二</a></li><br /><li><a href="#">服務二服務二</a></li><br /><li><a href="#">服務二服務二服務二</a></li><br /><li><a href="#">服務二</a></li><br /></ul><br /></li><br /><li><a href="#">成功案例</a><br /><ul><br /><li><a href="#">案例三</a></li><br /><li><a href="#">案例</a></li><br /><li><a href="#">案例三案例三</a></li><br /><li><a href="#">案例三案例三案例三</a></li><br /></ul><br /></li><br /><li><a href="#">關於我們</a><br /><ul><br /><li><a href="#">我們四</a></li><br /><li><a href="#">我們四</a></li><br /><li><a href="#">我們四</a></li><br /><li><a href="#">我們四111</a></li><br /></ul><br /></li></p><p><li><a href="#">線上示範</a><br /><ul><br /><li><a href="#">示範</a></li><br /><li><a href="#">示範</a></li><br /><li><a href="#">示範</a></li><br /><li><a href="#">示範示範示範</a></li><br /><li><a href="#">示範示範示範</a></li><br /><li><a href="#">示範示範</a></li><br /><li><a href="#">示範示範示範</a></li><br /><li><a href="#">示範示範示範示範示範</a></li><br /></ul><br /></li><br /><li><a href="#">聯絡我們</a><br /><ul><br /><li><a href="#">聯絡聯絡聯絡聯絡聯絡</a></li><br /><li><a href="#">聯絡聯絡聯絡</a></li><br /><li><a href="#">聯絡</a></li><br /><li><a href="#">聯絡聯絡</a></li><br /><li><a href="#">聯絡聯絡</a></li><br /><li><a href="#">聯絡聯絡聯絡</a></li><br /><li><a href="#">聯絡聯絡聯絡</a></li><br /></ul><br /></li></p><p></ul></p><p></body><br /></html>
[Ctrl+A 全選 提示:你可先修改部分代碼,再點運行代碼]
