|
|
Line 1: |
Line 1: |
- | <html> | + | <html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN"> |
- | | + | <head> |
- | <head> | + | <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> |
- | <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> | + | <meta http-equiv="Content-Language" content="zh-CN" /> |
- | <title>网页特效|http://homepage.yesky.com/|---CSS 制作的三级菜单</title> | + | <title>横向下拉菜单</title> |
- | <style type="text/css"> | + | <style type="text/css"> |
- | <!-- | + | <!-- |
- | body {
| + | * {margin:0;padding:0;border:0;} |
- | font-family: Arial, Helvetica, sans-serif;
| + | body { |
- | font-size: 11px;
| + | font-family: arial, 宋体, serif; |
- | margin-left: 0px; | + | font-size:12px; |
- | margin-top: 0px;
| + | |
- | margin-right: 0px;
| + | |
- | margin-bottom: 0px;
| + | |
- | }
| + | |
- | #menu {
| + | |
- | background-color: #FEF0E5;
| + | |
- | filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr='#FFFFFF', endColorStr='#FEF0E5', gradientType='0');
| + | |
- | }
| + | |
- | #nav, #nav ul {
| + | |
- | float:left; /* 菜单总体水平位置 */
| + | |
- | clear:right;
| + | |
- | list-style:none;
| + | |
- | /*line-height:22px; 一级菜单高 */
| + | |
- | /*background: #eee; 所有菜单移出色 */
| + | |
- | /*font-weight: bold;8*/
| + | |
- | padding:0px; | + | |
- | margin:0px;
| + | |
- | /*border:1px solid #ccc;
| + | |
- | border-right: 0px;*/
| + | |
- | } | + | |
- | #nav ul ul{
| + | |
- | /*border:1px solid #ccc;*/
| + | |
- | border-top:0px;
| + | |
- | border-right:0px;
| + | |
- | }
| + | |
- | #nav a {
| + | |
- | width:120px;
| + | |
- | display:block;
| + | |
- | color:#333;
| + | |
- | text-decoration:none;
| + | |
- | text-align:left;
| + | |
- | /*border-right:1px solid #CCC;*/
| + | |
- | padding: 3px 4px 3px 7px;
| + | |
- | }
| + | |
- | #nav a:hover{
| + | |
- | color:#000;
| + | |
- | border:1px solid #CCC;
| + | |
- | margin: 0px;
| + | |
- | padding: 3px 5px 3px 6px;
| + | |
- | background-color: #f1f1f1;
| + | |
- | text-decoration: none;
| + | |
- | } /* 所有 a:hover 字体样式 */
| + | |
- | #nav a.selected{background:url(flyout_arrow.gif) no-repeat right 50%;} /* 下拉图标 */
| + | |
- | #nav li {
| + | |
- | float:none;
| + | |
- | clear:right;
| + | |
- | height:22px;
| + | |
- | width:120px;
| + | |
- | }
| + | |
- | #nav li ul li{
| + | |
- | float:none;
| + | |
- | clear:right;
| + | |
- | height:22px;
| + | |
- | width:120px;
| + | |
- | }
| + | |
- | #nav li ul { /* 二级弹出位 */
| + | |
- | position:absolute;
| + | |
- | margin:-22px 0px 0px 119px;
| + | |
- | padding:0;
| + | |
- | left:-9999em;
| + | |
- | width:120px;
| + | |
- | font-weight:normal; | + | |
- | display:block;
| + | |
- | border:1px solid #CCCCCC;
| + | |
- | background:#fff;
| + | |
- | }
| + | |
- | /* 二级菜单宽 */
| + | |
- | #nav li ul a {
| + | |
- | width:120px; /* 二级菜单宽 */
| + | |
- | /*line-height:24px; 二级菜单高
| + | |
- | border:1px solid #CCC;*/
| + | |
- | height:22px;
| + | |
- | text-align:left;
| + | |
- | margin: 0px;
| + | |
- | }
| + | |
- | #nav li ul ul {
| + | |
- | margin:-22px 0px 0px 120px;
| + | |
- | border:1px solid #CCC;
| + | |
- | } /* 三级弹出位 */
| + | |
- | #nav li:hover ul ul,#nav li.sfhover ul ul{left:-9999em;}
| + | |
- | #nav li:hover ul,#nav li li:hover ul,#nav li.sfhover ul, #nav li li.sfhover ul{
| + | |
- | left:auto;
| + | |
- | height:22px;
| + | |
- | } /* 所有弹出菜单自动左边距 */
| + | |
- | #nav li:hover, #nav li.sfhover {
| + | |
- | background:#f1f1f1;
| + | |
- | height:22px;
| + | |
| } | | } |
- | /* 所有悬浮样式 */ | + | #nav { |
- | --> | + | height: 24px; list-style-type: none; padding-left:200px; |
- | </style> | + | line-height:24px;overflow:hidden;background:#999; |
- | <script type="text/javascript"><!--//--><![CDATA[//><!-- | + | } |
- | img1=new Image();
| + | #nav a { |
- | img1.src="flyout_arrow.gif";
| + | display: block; width: 80px; text-align:center; |
- | sfHover = function() {
| + | } |
- | var sfEls = document.getElementById("nav").getElementsByTagName("LI"); | + | #nav a:link { |
- | for (var i=0; i<sfEls.length; i++) { | + | color:#EEE; text-decoration:none; |
- | sfEls[i].onmouseover=function() { | + | } |
- | this.className+=" sfhover";
| + | #nav a:visited { |
- | } | + | color:#EEE;text-decoration:none; |
- | sfEls[i].onmouseout=function() { | + | } |
- | this.className=this.className.replace(new RegExp(" sfhover/b"), "");
| + | #nav a:hover { |
- | } | + | color:#FFF;text-decoration:none;font-weight:bold;background:#CCC; |
- | } | + | } |
- | } | + | #nav li { |
- | window.onload=sfHover; | + | float: left; width: 80px; |
- | //--><!]]></script> | + | } |
- | </head> | + | #nav li ul { |
- | | + | line-height: 24px; |
- | <body> | + | list-style-type: none; |
- | | + | text-align:left; |
- | | + | left: -999px; |
- | <table width="120" border="0" cellspacing="0" cellpadding="0" >
| + | width: 520px; //注意,这里一定要设置宽度; |
- | <tr>
| + | position: absolute; |
- | <td valign="top" id="menu">
| + | background:#CCC; |
- | <ul id="nav">
| + | } |
- | <li><a href="http://www.whsong.com" target="_blank">
| + | #nav li ul li{ |
- | <span style="font-size: 9pt">首页</span></a></li>
| + | float: left;width: 80px; //float就是子菜单横向的关键,可以继承父菜单而省略float |
- | <li><a href="http://www.whsong.com/" target="_blank" class="selected">
| + | } |
- | <span style="font-size: 9pt">项目需求合作</span></a><span style="font-size: 9pt">
| + | #nav li ul a{ |
- | </span>
| + | display: block; width: 65px;text-align:left;padding-left:15px; |
- | <ul>
| + | } |
- | <li ><a href="http://www.whsong.com/" class="selected"><span style="font-size: 9pt">网站项目
| + | #nav li ul a:link { |
- | </span> </a>
| + | color:#F1F1F1; text-decoration:none; |
- | <ul>
| + | } |
- | <li><a href="http://www.whsong.com/">
| + | #nav li ul a:visited { |
- | <span style="font-size: 9pt">网站项目 </span> </a>
| + | color:#F1F1F1;text-decoration:none; |
- | <li><a href="http://www.whsong.com/">
| + | } |
- | <span style="font-size: 9pt">整站项目</span></a></li>
| + | #nav li ul a:hover { |
- | <li><a href="http://www.whsong.com/">
| + | color:#FFF;text-decoration:none;font-weight:normal;background:#C00; |
- | <span style="font-size: 9pt">网站分析策划</span></a></li>
| + | } |
- | <li><a href="http://www.whsong.com/" target="_blank">
| + | #nav li:hover ul { |
- | <span style="font-size: 9pt">网页设计制作</span></a></li>
| + | left:25%; |
- | <li><a href="http://www.whsong.com/">
| + | } |
- | <span style="font-size: 9pt">网站制作与开发</span></a></li>
| + | #nav li.sfhover ul { |
- | <li><a href="http://www.whsong.com/">
| + | left:25%; |
- | <span style="font-size: 9pt">网站flash动画</span></a></li>
| + | } |
- | <li><a href="http://www.whsong.com/">
| + | #content { |
- | <span style="font-size: 9pt">网站服务器</span></a></li>
| + | clear: left; |
- | </ul>
| + | } |
- | </li>
| + | --> |
- | <li ><a href="http://www.whsong.com/" class="selected"><span style="font-size: 9pt">多媒体设计制作</span></a><span style="font-size: 9pt">
| + | </style> |
- | </span>
| + | <script type=text/javascript><!--//--><![CDATA[//><!-- |
- | <ul>
| + | function menuFix() { |
- | <li><a href="http://www.whsong.com/">
| + | var sfEls = document.getElementById("nav").getElementsByTagName("li"); |
- | <span style="font-size: 9pt">网站项目 </span> </a>
| + | for (var i=0; i<sfEls.length; i++) { |
- | <li><a href="http://www.whsong.com/">
| + | sfEls[i].onmouseover=function() { |
- | <span style="font-size: 9pt">平面设计</span></a></li>
| + | this.className+=(this.className.length>0? " ": "") + "sfhover"; |
- | <li><a href="http://www.whsong.com/">
| + | } |
- | <span style="font-size: 9pt">CAD工程图设计</span></a></li>
| + | sfEls[i].onMouseDown=function() { |
- | <li><a href="http://www.whsong.com/">
| + | this.className+=(this.className.length>0? " ": "") + "sfhover"; |
- | <span style="font-size: 9pt">3D建模与动画</span></a></li>
| + | } |
- | <li><a href="http://www.whsong.com/">
| + | sfEls[i].onMouseUp=function() { |
- | <span style="font-size: 9pt">Flash游戏动画</span></a></li>
| + | this.className+=(this.className.length>0? " ": "") + "sfhover"; |
- | <li><a href="http://www.whsong.com/">
| + | } |
- | <span style="font-size: 9pt">音效及音乐</span></a></li>
| + | sfEls[i].onmouseout=function() { |
- | <li><a href="http://www.whsong.com/">
| + | this.className=this.className.replace(new RegExp("( ?|^)sfhover\\b"), |
- | <span style="font-size: 9pt">游戏原画设定</span></a></li>
| + | ""); |
- | </ul>
| + | } |
- | </li>
| + | } |
- | <li ><a href="http://www.whsong.com/" class="selected"><span style="font-size: 9pt">软件开发</span></a><span style="font-size: 9pt">
| + | } |
- | </span>
| + | window.onload=menuFix; |
- | <ul>
| + | //--><!]]></script> |
- | <li><a href="http://www.whsong.com/">
| + | </head> |
- | <span style="font-size: 9pt">应用软件</span></a></li>
| + | <body> |
- | <li><a href="http://www.whsong.com/">
| + | <ul id="nav"> |
- | <span style="font-size: 9pt">游戏开发</span></a></li>
| + | <li><a href="#">菜单一</a> |
- | <li><a href="http://www.whsong.com/">
| + | <ul> |
- | <span style="font-size: 9pt">驱动程序</span></a></li>
| + | <li><a href="#">菜单一</a></li> |
- | <li><a href="http://www.whsong.com/">
| + | <li><a href="#">菜单一</a></li> |
- | <span style="font-size: 9pt">嵌入式开发</span></a></li>
| + | <li><a href="#">菜单一</a></li> |
- | <li><a href="http://www.whsong.com/">
| + | <li><a href="#">菜单一</a></li> |
- | <span style="font-size: 9pt">手机开发</span></a></li>
| + | <li><a href="#">菜单一</a></li> |
- | <li><a href="http://www.whsong.com/">
| + | <li><a href="#">菜单一</a></li> |
- | <span style="font-size: 9pt">单片机</span></a></li>
| + | </ul> |
- | <li><a href="http://www.whsong.com/">
| + | </li> |
- | <span style="font-size: 9pt">数据库设计</span></a></li>
| + | <li><a href="#">菜单二</a> |
- | <li><a href="http://www.whsong.com/">
| + | <ul> |
- | <span style="font-size: 9pt">代码移植</span></a></li>
| + | <li><a href="#">菜单二</a></li> |
- | </ul>
| + | <li><a href="#">菜单二</a></li> |
- | </li>
| + | <li><a href="#">菜单二</a></li> |
- | <li><a href="http://www.whsong.com/"><span style="font-size: 9pt">网络硬件</span></a></li>
| + | <li><a href="#">菜单二</a></li> |
- | </ul>
| + | <li><a href="#">菜单二</a></li> |
- | </li>
| + | </ul> |
- | <li><a href="http://www.whsong.com/" target="_blank" class="selected">
| + | </li> |
- | <span style="font-size: 9pt">信息与知识</span></a><span style="font-size: 9pt">
| + | <li><a href="#">菜单三</a> |
- | </span>
| + | <ul> |
- | <ul>
| + | <li><a href="#">菜单三</a></li> |
- | <li><a class="selected" href="http://www.whsong.com/"><span style="font-size: 9pt">信息与知识</span></a><span style="font-size: 9pt">
| + | <li><a href="#">菜单三</a></li> |
- | </span>
| + | <li><a href="#">菜单三</a></li> |
- | <ul>
| + | <li><a href="#">菜单三</a></li> |
- | <li><a href="http://www.whsong.com/">
| + | <li><a href="#">菜单三</a></li> |
- | <span style="font-size: 9pt">实用信息与工具 </span> </a></li>
| + | </ul> |
- | <li><a href="http://www.whsong.com/">
| + | </li> |
- | <span style="font-size: 9pt">新闻动态</span></a></li>
| + | <li><a href="#">菜单四</a> |
- | <li><a href="http://www.whsong.com/">
| + | <ul> |
- | <span style="font-size: 9pt">知识与技能</span></a></li>
| + | <li><a href="#">菜单四</a></li> |
- | <li><a href="http://www.whsong.com/">
| + | <li><a href="#">菜单四</a></li> |
- | <span style="font-size: 9pt">设计制作与欣赏</span></a></li>
| + | <li><a href="#">菜单四</a></li> |
- | <li><a href="http://www.whsong.com/">
| + | <li><a href="#">菜单四</a></li> |
- | <span style="font-size: 9pt">项目交易经验谈</span></a></li>
| + | <li><a href="#">菜单四</a></li> |
- | <li><a href="http://www.whsong.com/">
| + | </ul> |
- | <span style="font-size: 9pt">下载</span></a></li>
| + | </li> |
- | </ul>
| + | <li><a href="#">菜单五</a> |
- | </li>
| + | <ul> |
- | </ul>
| + | <li><a href="#">菜单五</a></li> |
- | </li>
| + | <li><a href="#">菜单五</a></li> |
- | <li><a href="http://www.whsong.com/">
| + | <li><a href="#">菜单五</a></li> |
- | <span style="font-size: 9pt">优秀作品欣赏</span></a></li>
| + | <li><a href="#">菜单五</a></li> |
- | <li><a href="http://www.whsong.com/" target="_blank">
| + | <li><a href="#">菜单五</a></li> |
- | <span style="font-size: 9pt">招骋</span></a></li>
| + | </ul> |
- | <li><a href="http://www.whsong.com/">
| + | </li> |
- | <span style="font-size: 9pt">关于本站</span></a></li>
| + | <li><a href="#">菜单六</a> |
- | </ul> </td>
| + | <ul> |
- | </tr>
| + | <li><a href="#">菜单六</a></li> |
- | </table>
| + | <li><a href="#">菜单六</a></li> |
- | | + | <li><a href="#">菜单六</a></li> |
- | </body> | + | <li><a href="#">菜单六</a></li> |
- | | + | <li><a href="#">菜单六</a></li> |
| + | </ul> |
| + | </li> |
| + | </ul> |
| + | </div> |
| + | </body> |
| </html> | | </html> |