鼠标划过变阴影的CSS菜单
从实现方法上来说，挺有创意，看了代码才知道，原来是用图片构成的，因人而宜了，图片对修改造成一定麻烦，通过这个菜单实例，你会对CSS控制背景的位置有一个更深的理解。
当前位置：编程学习 > JS >>
答案：<!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=gb2312" />
<title>CSS实现鼠标滑过显示阴影</title>
<style type="text/css">
#menu {position:relative; width:400px; height:50px; background:transparent url(http://www.zzzyk.com/jscss/demoimg/200905/normal.gif) 0 0 no-repeat; overflow:hidden; margin:2em auto; z-index:10;}
#menu ul {margin:0; padding:0;}
#menu li {list-style-type:none; display:inline; width:100px; height:50px;}
#menu a {display:block; width:100px; padding-top:50px; height:0; color:#000; text-decoration:none; float:left; background:transparent url(http://www.zzzyk.com/jscss/demoimg/200905/normal_over.gif) -110px -60px no-repeat; overflow:hidden;}
* html #menu a:link, * html #menu a:visited {height:50px; he\ight:0;}
#menu a:hover {background-position:top right; z-index:50;}
* html #menu a:hover {height:50px; he\ight:0;}
#lbox {width:405px;}
</style>
</head>
<body>
<div id="menu">
<ul>
<li><a id="item1" href="/" title="提供学习型源代码">站长资源库</a></li>
<li><a id="item2" href="/" title="源代码下载">源代码</a></li>
<li><a id="item3" href="/" title="网页特效">网页特效</a></li>
<li><a id="item4" href="/" title="资源分类">资源分类</a></li>
</ul>
</div>
</body>
</html>上一个：很棒的自定义CSS下拉菜单
下一个：只用一张背景图实现的CSS菜单
- 更多JS疑问解答：
- 几个验证11位手机号码格式的js代码
- js把图片转换成 base64代码
- js把base代码转换成图片
- JS 将 base64编码的图片转化为图片文件
- js中的定时器
- js如何获得FCKeditor控件的值
- 用js限制投票的cookie .目前设置的为：<input type="" class="" onclick="'window.location...
- JS验证，这块“牛皮”反复修改都不能实现
- 在JS中使用DOM模型
- 如何用JS 获取本地文件夹的文件列表
- js中new 了两个Object数组。怎么样将数组内容合并，重复的内容？
- 求实现自动生成图片缩略图的JS代码
- JS脚本网页问题
- js，代码中"object"和"Object"区别？
- js+flash实现网页图片切换效果，出现边框，单击激活此控件。