以下为引用内容: <html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN"> <머리> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>css菜单演示</title> <스타일 유형="텍스트/css"> <!-- *{마진:0;패딩:0;테두리:0;} 몸 { 글꼴 모음: arial, 宋体, serif; 글꼴 크기:12px; } #nav { 줄 높이: 24px; 목록 스타일 유형: 없음; 배경:#666; }
#nav a { 디스플레이: 블록; 너비: 80px; 텍스트 정렬:가운데; } #nav a:링크 { 색상:#666; 텍스트 장식:없음; } #nav a:방문 { 색상:#666;텍스트 장식:없음; } #nav a:hover { 색상:#FFF;텍스트 장식:없음;글꼴 두께:굵게; } #nav 리 { 플로트: 왼쪽; 너비: 80px; 배경:#CCC; } #nav li a:hover{ 배경:#999; } #nav li ul { 줄 높이: 27px; 목록 스타일 유형: 없음;텍스트 정렬:왼쪽; 왼쪽: -999em; 너비: 180px; 위치: 절대; } #nav li ul li{ 플로트: 왼쪽; 너비: 180px; 배경: #F6F6F6; } #nav li ul a{ 디스플레이: 블록; 너비: 156px;텍스트 정렬:왼쪽;패딩-왼쪽:24px; }
#nav li ul a:link { 색상:#666; 텍스트 장식:없음; } #nav li ul a:방문 { 색상:#666;텍스트 장식:없음; } #nav li ul a:hover { 색상:#F3F3F3;텍스트 장식:없음;글꼴 두께:일반; 배경:#C00; } #nav li:hover ul { 왼쪽: 자동; } #nav li.sfhover ul { 왼쪽: 자동; } #콘텐츠 { 지우기: 왼쪽; } --> </style>
<스크립트 유형=텍스트/자바스크립트><!--//--><![CDATA[//><!-- 함수 메뉴Fix() { var sfEls = document.getElementById("nav").getElementsByTagName("li"); for (var i=0; i<sfEls.length; i++) { sfEls[i].onmouseover=function() { this.className+=(this.className.length>0? " ": "") + "sfhover"; } sfEls[i].onMouseDown=function() { this.className+=(this.className.length>0? " ": "") + "sfhover"; } sfEls[i].onMouseUp=function() { this.className+=(this.className.length>0? " ": "") + "sfhover"; } sfEls[i].onmouseout=function() { this.className=this.className.replace(new RegExp("( ?|^)sfhover\b"), ""); } } } window.onload=menuFix; //--><!]]></script> </head> <본문> <ul id="nav"> <li><a href="#">产product介绍</a> <ul> <li><a href="#">제품일</a></li> <li><a href="#">제품일</a></li> <li><a href="#">제품일</a></li> <li><a href="#">제품일</a></li> <li><a href="#">제품일</a></li> <li><a href="#">제품일</a></li> </ul> </li> <li><a href="#">服务介绍</a> <ul> <li><a href="#">이용자</a></li> <li><a href="#">이용자</a></li> <li><a href="#">이용자</a></li> <li><a href="#">추진 두 가지</a></li> <li><a href="#">이동식 이원형</a></li> <li><a href="#">이용자</a></li> </ul> </li> <li><a href="#">성공회</a> <ul> <li><a href="#">案例三</a></li> <li><a href="#">案例</a></li> <li><a href="#">案例三案例三</a></li> <li><a href="#">案例三案例三案例三</a></li> </ul> </li> <li><a href="#">저희는요</a> <ul> <li><a href="#">저희 사</a></li> <li><a href="#">저희 사</a></li> <li><a href="#">저희 사</a></li> <li><a href="#">我们4111</a></li> </ul> </li>
<li><a href="#">현재 상태</a> <ul> <li><a href="#">演示</a></li> <li><a href="#">演示</a></li> <li><a href="#">演示</a></li> <li><a href="#">演示演示演示</a></li> <li><a href="#">演示演示演示</a></li> <li><a href="#">演示演示</a></li> <li><a href="#">演示演示演示</a></li> <li><a href="#">演示演示演示演示演示</a></li> </ul> </li> <li><a href="#">联系我们</a> <ul> <li><a href="#">联系联系联系联系联系</a></li> <li><a href="#">联系联系联系</a></li> <li><a href="#">설명</a></li> <li><a href="#">联系联系</a></li> <li><a href="#">联系联系</a></li> <li><a href="#">联系联系联系</a></li> <li><a href="#">联系联系联系</a></li> </ul> </li> </ul> </body> </html>
|