蓝白相间纯CSS悬停立体效果导航菜单

2024-09-05 12:20:25

字体：大中小

来源：转载

供稿：网友

纯CSS编写的导航菜单，当悬停的时候它是有阴影的，显出立体效果的菜单，蓝色与白色搭配，对比强烈，清新自然，完全CSS实现，初学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><FCK:meta http-equiv="Content-Type" content="text/html; charset=gb2312"  /><title>CSS导航菜单实例</title><style type="text/css">* {font-size:12px;text-align:center;}body{background:#FB0;}#nav {width:700px;margin:20px auto 0 auto;}#nav li {display: inline;list-style-type: none;}#nav li a:link,#nav li a:visited {float:left;margin-right:2px;padding:3px 8px 3px 8px;text-decoration: none;color:#fff;background:#06f;border-top:1px solid #fff;border-right:1px solid #333;border-bottom:1px solid #333;border-left:1px solid #fff;}#nav li a:hover {padding:2px 8px 4px 8px;border-top:1px solid #333;border-right:1px solid #fff;border-bottom:1px solid #fff;border-left:1px solid #333;}#nav li a#current {color:#ff0;}</style></head><body><ul id="nav"><li>回到首页</li><li>源码下载</li><li>网页教程</li><li>设计资讯</li><li>网页特效</li><li>最新文章</li><li>下载排行</li><li>联系我们</li></ul></body></html>

上一篇：Ajax选项卡、隔行换色、弹出层

下一篇：兼容IE各版本的纯CSS二级下拉菜单