[转]带拖影的JS菜单
转自：http://www.oschina.net/code/snippet_114440_12182
问题：这个页面的代码结构很混乱 我尝试把js和css放到head中 但是效果就不无法显示了 这是为什么呢？
<html>
<head>
<meta charset="utf-8">
<title>KISSY ColorBg</title>
<script type="text/javascript" src="chrome-extension://bfbmjmiodbnnpllbbbfblcplfjjepjdn/js/injected.js">
</script>
</head>
<body>
<style>
ul,li { margin: 0;padding: 0; list-style: none;}
a { color: #0e3254; text-decoration: none;}
a:hover { color: #f3fdff;}
.menu { margin: 0 auto; width: 240px; background-color: #f8f9fd; font: 12px/1.5 '微软雅黑';}
.menu li a { display: block; padding: 10px;}
</style>
<ul class="menu" id="menu">
<li><a href="" target="_blank" style="background-color: rgb(248, 249, 253); ">全部任务</a></li>
<li><a href="" target="_blank" style="background-color: rgb(248, 249, 253); ">已完成</a></li>
<li><a href="" target="_blank" style="background-color: rgb(248, 249, 253); ">即将开始</a></li>
<li><a href="" target="_blank" style="background-color: rgb(248, 249, 253); ">还在规划中尚未确定</a></li>
<li><a href="" target="_blank" style="background-color: rgb(248, 249, 253); ">私人空间</a></li>
<li><a href="" target="_blank" style="background-color: rgb(248, 249, 253); ">垃圾回收站</a></li>
<li><a href="" target="_blank" style="background-color: rgb(248, 249, 253); ">全部任务</a></li>
<li><a href="" target="_blank" style="background-color: rgb(248, 249, 253); ">已完成</a></li>
<li><a href="" target="_blank" style="background-color: rgb(248, 249, 253); ">即将开始</a></li>
<li><a href="" target="_blank" style="background-color: rgb(248, 249, 253); ">还在规划中尚未确定</a></li>
<li><a href="" target="_blank" style="background-color: rgb(248, 249, 253); ">私人空间</a></li>
<li><a href="" target="_blank" style="background-color: rgb(248, 249, 253); ">垃圾回收站</a></li>
</ul>
<script src="http://a.tbcdn.cn/s/kissy/1.2.0/kissy-min.js"></script>
<script>
(function(S){
var D = S.DOM, E = S.Event, index = -1, as = [];
S.all("#menu a").on("mouseover", function(){
var _this = this;
index = S.indexOf(_this, S.all("#menu a"));
if(as[index] && as[index].isRunning(_this)){
as[index].stop(false);
}
D.css(_this, "background-color", "#66a7e1");
}).on("mouseout", function(){
as[index] = new S.Anim(this, {"backgroundColor":"#f8f9fd"}, 0.5, "easeOut", function(){});
as[index].run();
});
})(KISSY);
</script>
</body></html>
问题：这个页面的代码结构很混乱 我尝试把js和css放到head中 但是效果就不无法显示了 这是为什么呢？