CSS 制作的三级菜单
代码如下：
<br/><html><br/><br/><head><br/><meta http-equiv="Content-Type" content="text/html; charset=gb2312"><br/><title>CSS 制作的三级菜单</title><br/><style type="text/css"><br/><!--<br/>body {<br/> font-family: Arial, Helvetica, sans-serif;<br/> font-size: 11px;<br/> margin-left: 0px;<br/> margin-top: 0px;<br/> margin-right: 0px;<br/> margin-bottom: 0px;<br/>}<br/>#menu {<br/>background-color: #FEF0E5;<br/>filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr='#FFFFFF', endColorStr='#FEF0E5', gradientType='0');<br/>}<br/>#nav, #nav ul {<br/> float:left; /* 菜单总体水平位置 */<br/> clear:right; <br/> list-style:none;<br/> /*line-height:22px; 一级菜单高 */<br/> /*background: #eee; 所有菜单移出色 */<br/> /*font-weight: bold;8*/<br/> padding:0px;<br/> margin:0px;<br/> /*border:1px solid #ccc;<br/> border-right: 0px;*/<br/>}<br/>#nav ul ul{<br/> /*border:1px solid #ccc;*/<br/> border-top:0px;<br/> border-right:0px;<br/>}<br/>#nav a {<br/> width:120px;<br/> display:block;<br/> color:#333;<br/> text-decoration:none;<br/> text-align:left;<br/> /*border-right:1px solid #CCC;*/<br/> padding: 3px 4px 3px 7px;<br/>}<br/>#nav a:hover{<br/>color:#000;<br/>border:1px solid #CCC;<br/>margin: 0px;<br/>padding: 3px 5px 3px 6px;<br/>background-color: #f1f1f1;<br/>text-decoration: none;<br/>} /* 所有 a:hover 字体样式 */<br/>#nav a.selected{background:url(flyout_arrow.gif) no-repeat right 50%;} /* 下拉图标 */<br/>#nav li {<br/>float:none;<br/>clear:right;<br/>height:22px;<br/>width:120px;<br/>}<br/>#nav li ul li{<br/>float:none;<br/>clear:right;<br/>height:22px;<br/>width:120px;<br/>}<br/>#nav li ul { /* 二级弹出位 */<br/> position:absolute;<br/> margin:-22px 0px 0px 119px;<br/> padding:0;<br/> left:-9999em;<br/> width:120px;<br/> font-weight:normal;<br/> display:block;<br/> border:1px solid #CCCCCC;<br/> background:#fff;<br/>}<br/> /* 二级菜单宽 */<br/>#nav li ul a {<br/> width:120px; /* 二级菜单宽 */<br/> /*line-height:24px; 二级菜单高 <br/> border:1px solid #CCC;*/<br/> height:22px;<br/> text-align:left;<br/> margin: 0px;<br/>}<br/>#nav li ul ul {<br/>margin:-22px 0px 0px 120px;<br/>border:1px solid #CCC;<br/>} /* 三级弹出位 */<br/>#nav li:hover ul ul,#nav li.sfhover ul ul{left:-9999em;}<br/>#nav li:hover ul,#nav li li:hover ul,#nav li.sfhover ul, #nav li li.sfhover ul{<br/>left:auto;<br/>height:22px;<br/>} /* 所有弹出菜单自动左边距 */<br/>#nav li:hover, #nav li.sfhover {<br/>background:#f1f1f1;<br/>height:22px;<br/>} <br/>/* 所有悬浮样式 */<br/>--><br/></style><br/><script type="text/javascript"><!--//--><![CDATA[//><!--<br/>img1=new Image();<br/>img1.src="flyout_arrow.gif";<br/>sfHover = function() {<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+=" sfhover";<br/> }<br/> sfEls[i].onmouseout=function() {<br/> this.className=this.className.replace(new RegExp(" sfhover\\b"), "");<br/> }<br/> }<br/>}<br/>window.onload=sfHover;<br/>//--><!]]></script><br/></head><br/><br/><body><br/><br/><table width="120" border="0" cellspacing="0" cellpadding="0" ><br/> <tr><br/> <td valign="top" id="menu"><br/><ul id="nav"><br/> <li><a href="http://www.xunzou.com" target="_blank"><br/> <span style="font-size: 9pt">首页</span></a></li><br/> <li><a href="#" target="_blank" class="selected"><br/> <span style="font-size: 9pt">项目需求合作</span></a><span style="font-size: 9pt"><br/> </span><br/> <ul><br/> <li ><a href="#" class="selected"><span style="font-size: 9pt">网站项目 <br/> </span> </a><br/> <ul><br/> <li><a href="#"><br/> <span style="font-size: 9pt">网站项目 </span> </a><br/> <li><a href="#"><br/> <span style="font-size: 9pt">整站项目</span></a></li><br/> <li><a href="#"><br/> <span style="font-size: 9pt">网站分析策划</span></a></li><br/> <li><a href="#" target="_blank"><br/> <span style="font-size: 9pt">网页设计制作</span></a></li><br/> <li><a href="#"><br/> <span style="font-size: 9pt">网站制作与开发</span></a></li><br/> <li><a href="#"><br/> <span style="font-size: 9pt">网站flash动画</span></a></li><br/> <li><a href="#"><br/> <span style="font-size: 9pt">网站服务器</span></a></li> <br/> </ul><br/> </li><br/> <li ><a href="#" class="selected"><span style="font-size: 9pt">多媒体设计制作</span></a><span style="font-size: 9pt"><br/> </span><br/> <ul><br/> <li><a href="#"><br/> <span style="font-size: 9pt">网站项目 </span> </a><br/> <li><a href="#"><br/> <span style="font-size: 9pt">平面设计</span></a></li><br/> <li><a href="#"><br/> <span style="font-size: 9pt">CAD工程图设计</span></a></li><br/> <li><a href="#"><br/> <span style="font-size: 9pt">3D建模与动画</span></a></li><br/> <li><a href="#"><br/> <span style="font-size: 9pt">Flash游戏动画</span></a></li><br/> <li><a href="#"><br/> <span style="font-size: 9pt">音效及音乐</span></a></li><br/> <li><a href="#"><br/> <span style="font-size: 9pt">游戏原画设定</span></a></li> <br/> </ul><br/> </li><br/> <li ><a href="#" class="selected"><span style="font-size: 9pt">软件开发</span></a><span style="font-size: 9pt"><br/> </span><br/> <ul><br/> <li><a href="#"><br/> <span style="font-size: 9pt">应用软件</span></a></li><br/> <li><a href="#"><br/> <span style="font-size: 9pt">游戏开发</span></a></li><br/> <li><a href="#"><br/> <span style="font-size: 9pt">驱动程序</span></a></li><br/> <li><a href="#"><br/> <span style="font-size: 9pt">嵌入式开发</span></a></li><br/> <li><a href="#"><br/> <span style="font-size: 9pt">手机开发</span></a></li><br/> <li><a href="#"><br/> <span style="font-size: 9pt">单片机</span></a></li> <br/> <li><a href="#"><br/> <span style="font-size: 9pt">数据库设计</span></a></li> <br/> <li><a href="#"><br/> <span style="font-size: 9pt">代码移植</span></a></li> <br/> </ul> <br/> </li><br/> <li><a href="#"><span style="font-size: 9pt">网络硬件</span></a></li><br/> </ul><br/> </li><br/> <li><a href="#" target="_blank" class="selected"><br/> <span style="font-size: 9pt">信息与知识</span></a><span style="font-size: 9pt"><br/> </span><br/> <ul> <br/> <li><a class="selected" href="#"><span style="font-size: 9pt">信息与知识</span></a><span style="font-size: 9pt"><br/> </span><br/> <ul><br/> <li><a href="#"><br/> <span style="font-size: 9pt">实用信息与工具 </span> </a></li><br/> <li><a href="#"><br/> <span style="font-size: 9pt">新闻动态</span></a></li><br/> <li><a href="#"><br/> <span style="font-size: 9pt">知识与技能</span></a></li><br/> <li><a href="#"><br/> <span style="font-size: 9pt">设计制作与欣赏</span></a></li><br/> <li><a href="#"><br/> <span style="font-size: 9pt">项目交易经验谈</span></a></li><br/> <li><a href="#"><br/> <span style="font-size: 9pt">下载</span></a></li><br/> </ul><br/> </li><br/> </ul><br/> </li><br/> <li><a href="#"><br/> <span style="font-size: 9pt">优秀作品欣赏</span></a></li><br/> <li><a href="#" target="_blank"><br/> <span style="font-size: 9pt">招骋</span></a></li><br/> <li><a href="#"><br/> <span style="font-size: 9pt">关于本站</span></a></li><br/> </ul><br/></td><br/> </tr><br/></table><br/><br/></body><br/><br/></html><br/>
0 条留言
我要留言