突起的导航栏效果[经典]

突起的导航栏效果[经典]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">powered by 25175.net
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>border-style的outset属性</title>
<style type="text/css">
.bevelmenu{ font: bold 13px arial; padding: 6px 0; margin: 0; width: 100%; background-color: #FFF2BF; text-align: left; /*将值设置为"right"菜单会向右靠拢*/ }
.bevelmenu li{ list-style: none; display: inline; }
.bevelmenu li a{ padding: 3px 0.5em; text-decoration: none; color: black; background-color: #FFF2BF; border: 2px solid #FFF2BF; }
.bevelmenu li a:hover{ color: black; background-color: #FFE271; border-style: outset; }
html>body .bevelmenu li a:active{ /* 鼠标按下的效果只有非IE浏览器才支持 */ border-style: inset; } </style>
</head>

<BODY>
<ul class="bevelmenu"><li><a href="http://www.sina.com">新浪</a> </li><li><a href="http://www.163.com">网易</a> </li><li><a href="http://www.baidu.com">Baidu</a> </li><li><a href="http://www.yahoo.com">yahoo</a> </li><li><a href="http://www.google.com">Google</a> </li><li><a href="http://www.25175.com">25175</a> </li> </ul>
</BODY>
</html>

【内容导航】
第1页：完全用CSS实现的中英文双语导航菜单(经典)	第2页：商业风格的CSS垂直菜单
第3页：突起的导航栏效果[经典]	第4页：点击显示的FAQ菜单效果[经典]
第5页：一款DIV+CSS闪动导航条效果(经典)	第6页：非常酷的CSS菜单效果B(经典)
第7页：非常酷的CSS菜单效果A（经典）	第8页：会旋转的菜单导航（经典）
第9页：带项目描述的导航菜单（经典）	第10页：聚合的导航菜单效果（经典）
第11页：整合在IE中的导航条（经典）	第12页：含下拉菜单的绿色导航条
第13页：关联菜单（连动菜单）	第14页：可拖动的导航菜单
第15页：多级滚动菜单	第16页：微软导航菜单
第17页：鼠标移到文字上自动展开	第18页：点击渐显的导航菜单
第19页：随机网站推荐脚本	第20页：网站内快捷键导航
第21页：左侧导航菜单类似按钮	第22页：可移动的导航栏
第23页：页面顶部多级导航栏	第24页：浮动、隐藏的导航菜单
第25页：上下弹动的导航条	第26页：鼠标指向显示次级菜单
第27页：漂亮的仿flash菜单	第28页：滑动的层作菜单导航
第29页：精彩的跳动菜单效果	第30页：类似与QQ的好友/黑名单之类的树型菜单
第31页：定时改变标题栏的内容

菜单导航集合

突起的导航栏效果[经典]