首先上图：
样式如下：
.main_nav li{height:48px;}
.main_nav li a{color:#fff;display:block;font-size:16px;line-height:48px;200px;border-left:6px solid transparent;}
.main_nav li a:hover,.main_nav li.active a{background:#ececec;color:#494949;border-color:#2b2b2b;}
但在IE6下出现了BUG，border-color为transparent不能正常显示，在网上找到解决办法，应用滤镜chroma,记录至此：
.main_nav li{height:48px;} .main_nav li a{color:#fff;display:block;font-size:16px;line-height:48px;width:200px;border-left:6px solid transparent;_border-color:tomato;_filter:chroma(color=tomato);} /*IE6下hack解决*/ .main_nav li a:hover,.main_nav li.active a{background:#ececec;color:#494949;border-color:#2b2b2b;}
filter:chroma,
Chroma属性可以设置一个对象中指定的颜色为透明色.
PS:另外，用CSS写出来的小三角，代码如下：
<!doctype html>
<html>
<head>
<title>chroma实验</title>
<meta charset="utf-8"/>
<style type="text/css">
*{margin:0;margin:0;}
.demo{500px;height:500px;border:5px solid #139ac7;position:relative;}
.triangle{content:'';0;height:0;line-height:0;border:10px solid transparent;border-left:10px solid #139ac7;position:absolute;top:0;right:-25px;}
</style>
</head>
<body>
<div class="demo">
<div class="triangle"></div>
</div>
</body>
在IE6下面也是不能正常显示的，这个不能用chroma来解决，只能通过 _border:10px dashed #139ac7来解决这个问题