超酷JS+CSS动感鼠标特效菜单，竖向排列

答案：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>林依晨鼠标特效菜单</title>
<style type="text/css">
body, body div, body p, body th, body td, body li, body dd {
   font-size: small;
   voice-family: "\"}\"";
   voice-family: inherit;
   font-size: x-small
  }
  html>body, html>body div, html>body p, html>body th, html>body td, html>body li, html>body dd {
   font-size: small
  }
  body {
  font-family:  verdana,arial,helvetica,sans-serif;
  font-size: 10px;
   text-align: center;
  }
 
  #Main {
    padding-top: 50px;
    margin-left: 250px;
    width: 300px;
  }
  
  #fancyMenu {
   position:relative;
   width:250px;
   margin:0 auto;
   padding:0;
   font:0.6em verdana,arial,helvetica;
   text-transform:uppercase;
  }

  #fancyMenu li {
   position:relative;
   padding:2px 2px 2px 6px;
   width:240px;
   border:1px solid #000;
   list-style-type:none;
   margin:2px 0 0 0;
  }

  #fancyMenu li a {
   position:relative;
   display:inline-block;
   width:100%;
   height:100%;
   color:#525B53;
   text-decoration:none;
   z-index:10;
   margin:0;
  }

  #fancyMenu li>a {
   display:block;
  }

  #fancyMenu li a:hover {
   color:#FFF;
  }

  .expander {
   position:absolute;
   background-color:#000;
   width:250px;
   left:0px;
   height:1px;
   z-index:0;
   display:none;
   padding:0;
   font-size:1px;
   margin:0;
  }
  
  .valid {
    font-size:10pt;
  }
  
  </style>
<script>
var d=document;
var fm_textValues = new Array();
var fm_activeLI   = new Array();
var fm_expandObj  = new Array();
var fm_liObj;
var zInterval = new Array();
var kInterval = new Array();
var fm_curOpacity  = new Array();
var fm_doFade      = new Array();
var fm_doExpansion = new Array();
var fm_stringIndex = new Array();
function fm_init(){if(!d.getElementById)return;
ulObj=d.getElementById("fancyMenu");
fm_liObj=ulObj.getElementsByTagName("li");
for(i=0;i<fm_liObj.length;i++) {
fm_liObj[i].xindex = i;
aObj = fm_liObj[i].getElementsByTagName("a")[0];
aObj.onmouseover = function() { fm_handleMouseOver(this.parentNode.xindex); }
aObj.onmouseout  = function() { fm_handleMouseOut(this.parentNode.xindex); }
fm_textValues[i] = aObj.innerHTML;
fm_expandObj[i] = fm_liObj[i].appendChild(d.createElement("div"));
fm_expandObj[i].className = "expander";
fm_expandObj[i].style.top = fm_liObj[i].offsetHeight/2 + "px";
fm_expandObj[i].xindex = i;
zInterval[i] = null; kInterval[i] = null;
fm_stringIndex[i] = 1;
fm_curOpacity[i] = 100;
fm_activeLI[i] = 0;}}
function fm_handleMouseOver(objIndex) {
if(fm_activeLI[objIndex])return;
fm_activeLI[objIndex]=1;
fm_expandObj[objIndex].style.display = "block";
fm_expandObj[objIndex].style.height = "1px";
fm_expandObj[objIndex].style.top = fm_liObj[objIndex].offsetHeight/2+"px";
fm_doExpansion[objIndex] = function() { fm_expandDIV(objIndex); }
zInterval[objIndex] = setInterval(fm_doExpansion[objIndex],10);
}
function fm_handleMouseOut(objIndex) {
if(kInterval[objIndex] != null) return;
aObj = fm_liObj[objIndex].getElementsByTagName("a")[0];
aObj.innerHTML = "";
aObj.innerHTML = fm_textValues[objIndex].substring(0,1);
fm_doFade[objIndex] = function() { fm_fadeExpander(objIndex); }
kInterval[objIndex] = setInterval(fm_doFade[objIndex],10);
}
function fm_expandDIV(objIndex) {
h = new Array(); y = new Array();
if(fm_expandObj[objIndex].offsetTop>=0) {
h[objIndex] = fm_expandObj[objIndex].offsetHeight;
y[objIndex] = fm_expandObj[objIndex].offsetTop;
if(h[objIndex]<fm_liObj[objIndex].offsetHeight)h[objIndex]+=2;
y[objIndex]--;
fm_expandObj[objIndex].style.top = y[objIndex]+"px";
fm_expandObj[objIndex].style.height = h[objIndex]+"px";
} else {
clearInterval(zInterval[objIndex]);
fm_doExpansion[objIndex]=null;
zInterval[objIndex] = null;}}
function fm_fadeExpander(objIndex) {
fm_curOpacity[objIndex]=d.all?fm_curOpacity[objIndex]:fm_curOpacity[objIndex]/100;
fm_curOpacity[objIndex]-=d.all?5:0.05;
fm_expandObj[objIndex].style.opacity = fm_curOpacity[objIndex];
fm_expandObj[objIndex].style.MozOpacity = fm_curOpacity[objIndex];
fm_expandObj[objIndex].style.filter="alpha(opacity=" + fm_curOpacity[objIndex] + ")";
aObj = fm_liObj[objIndex].getElementsByTagName("a")[0];
if(fm_curOpacity[objIndex]<(d.all?60:0.6)) { 
aObj.appendChild(d.createTextNode(fm_textValues[objIndex].charAt(fm_stringIndex[objIndex])));
fm_stringIndex[objIndex]++;}
if(fm_curOpacity[objIndex]<=0 && aObj.innerHTML==fm_textValues[objIndex]) {
clearInterval(kInterval[objIndex]);
kInterval[objIndex] = null;
fm_expandObj[objIndex].style.display = "none";
fm_expandObj[objIndex].style.opacity = 0.99;
fm_expandObj[objIndex].style.MozOpacity = 0.99;
fm_expandObj[objIndex].style.filter="alpha(opacity=100)";
fm_expandObj[objIndex].style.height = "1px";
fm_expandObj[objIndex].style.top = fm_liObj[objIndex].offsetHeight/2 + "px";
fm_activeLI[objIndex]=0;
fm_curOpacity[objIndex] = 100;
fm_stringIndex[objIndex] = 1;
return;}
if(!d.all)fm_curOpacity[objIndex]*=100;}
if (document.addEventListener) {
document.addEventListener("DOMContentLoaded", fm_init, null);}
window.onload = fm_init;
</script>
  </head>
  <body>
        <ul id="fancyMenu"  >
          <li><a href="#" title="我的生活照片" accesskey="g">[G]ALLERY 我的相册</a></li>
          <li><a href="#" title="源代码交流区" accesskey="f">[F]ORUM 源码交流区</a></li>
          <li><a href="#" title="我的官方博客" accesskey="a">[B]LOG 官方博客</a></li>
          <li><a href="#" title="最新资讯信息" accesskey="n">[N]EWS 最新资讯</a></li>
        </ul>
  </body>
</html>
上一个：展开、折叠的垂直两级菜单，可用到后台左侧
下一个：动感伸缩、关闭的JS+CSS菜单
更多图片编程知识: