鼠标划过变阴影的CSS菜单

2024-09-05 12:19:54

字体：大中小

来源：转载

供稿：网友

从实现方法上来说，挺有创意，看了代码才知道，原来是用图片构成的，因人而宜了，图片对修改造成一定麻烦，通过这个菜单实例，你会对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=gb2312" /><title>CSS实现鼠标滑过显示阴影</title><style type="text/css">#menu {position:relative; width:400px; height:50px; background:transparent url(http://www.codefans.net/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.codefans.net/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>源码爱好者</li><li>源代码</li><li>网页特效</li><li>资源分类</li></ul></div></body></html>

上一篇：清新兼容性好的水平CSS菜单

下一篇：另类飞出的CSS分类导航菜单