纯CSS菜单，鼠标经过变换背景很漂亮

2024-09-05 12:19:56

字体：大中小

来源：转载

供稿：网友

纯CSS菜单，鼠标滑动经过时切换背景很漂亮，每个菜单项是圆滑的，只用了一张背景图片就搞定了，效果非常不错。
　　通过这个菜单你或许可以对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>CSS菜单</title><style>body {font-size:12px;}.nav {margin:0 auto; text-align:center; font-weight:bold; border-bottom:3px solid #579cc6;}.nav a {display:inline-block; margin:0 3px; height:25px; background:url(/jscss/demoimg/200906/bg-index.jpg) left bottom no-repeat; padding-left:15px; color:#666; text-decoration:none; cursor:pointer;}.nav a span {display:inline-block; height:25px; line-height:25px; background:url(/jscss/demoimg/200906/bg-index.jpg) right bottom no-repeat; padding-right:15px;}.nav a:hover {background:url(/jscss/demoimg/200906/bg-index.jpg) left top no-repeat; color:#FFF;}.nav a:hover span {background:url(/jscss/demoimg/200906/bg-index.jpg) right top no-repeat;}.nav a.set {background:url(/jscss/demoimg/200906/bg-index.jpg) left top no-repeat; color:#FFF; }.nav a.set span {background:url(/jscss/demoimg/200906/bg-index.jpg) right top no-repeat;}</style></head><body><div class="nav"><span>浏览更新</span><span>分类导航</span><span>排行榜</span><span>上海世博会</span><span>2010世界杯</span><span>留言</span></div></body></html>

上一篇：左侧的JS后台折叠菜单，支持Cookie保存

下一篇：基本的全兼容纯CSS下拉菜单