http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/1999/xhtml">.menu{border:solid 1px bluewidth:140pxfont-size:16pxpadding:5pxmargin:0 auto}.menu a{display:blocktext-align:centercolor:redwidth:130pxheight:1.5empadding:4pxtext-decoration:noneposition:relative}.menu span{display:blockborder-style:solidborder-width:8pxoverflow:hiddenposition:absolutetop:4pxwidth:0pxheight:0pxoverflow:hidden}.menu a:link span{display:none}.menu a:hover span.left{display:blockborder-color:whiteborder-left-color:blackleft:8px}.menu a:hover span.right{display:blockborder-color:whiteborder-right-color:blackright:8px} http://www.baidu.com">class="left">junshao1 http://www.baidu.com">class="left">junshao1 http://www.baidu.com">class="left">junshao1 http://www.baidu.com">class="left">junshao1 http://www.baidu.com">class="left">junshao1 我改了一下，在IE7和FF3下测试通过，不知道是不是你要的效果，如果有出入的话我们可以再交流。你可以做一个带箭头的div；然后样式如下：
div
{
/* 箭头的样式，你自己设计，下面是旋转的样式*/
transform:rotate(90deg)
-ms-transform:rotate(90deg)/* Internet Explorer */
-moz-transform:rotate(90deg)/* Firefox */
-webkit-transform:rotate(90deg)/* Safari 和 Chrome */
-o-transform:rotate(90deg)/* Opera */
}
这个是CSS3，所以浏览器并不是都兼容的。上面的deg就是角度单位度。
<style>
.arbox{position: relative}
.arr{
width: 0
height: 0
overflow: hidden
border-width: 10px
border-style:dashed dashed dashed solid
border-color:transparent transparent transparent #b2c1db
position: absolute
left: 15px
}
.block {
background-color: #b2c1db
height: 12px
left: 3px
overflow: hidden
position: absolute
top: 4px
width: 12px
}
</style>
<div class="arbox">
<div class="arr"></div>
<div class="block"></div>
</div>
