本例的目标是实现带有两侧箭头的菜单效果，这里的箭头没有使用任何背景图像文件，而是完全依靠CSS代码实现的。
仍然使用前面的HTML代码，但是必须进行一定的改造，也就是每个菜单项增加了两个盒子来放置三角形。具体代码如下：
<div id="menu">
<a href="#">
<span class="left"></span>
Home
<span class="right"></span>
</a>
<a href="#">
<span class="left"></span>
Contact Us
<span class="right"></span>
</a>
<a href="#">
<span class="left"></span>
Web Dev
<span class="right"></span>
</a>
<a href="#">
<span class="left"></span>
Web Design
<span class="right"></span>
</a>
<a href="#">
<span class="left"></span>
Map
<span class="right"></span>
</a>
</div>
可以看出，在每个<a>和</a>标记之间，连接文字的前后增加了一对<span></span>标记，同时分别设置了CSS类别，即left和right。注意它们内部本身是空白的，这样可以通过CSS的样式吧这些span显示为三角形了。
说明 （1）有的参考资料上成为“钩子”，意思是它像钩子一样可以挂接CSS样式，很形象说明了这种方法的本质。
下面首先设置#menu容器，代码如下：
#menu {
font-family:Arial, Helvetica, sans-serif; /*字体*/
font-size:14px;
margin:0 auto; /*居中对齐*/
border:solid 1px #CCC;
120px;
}
接着设置菜单项普通样式
#menu a,#menu a:visited{
text-decoration:none;
text-align:center;
color:#c00;
display:block;
padding:4px;
background-color:#fff;
border:1px solid #fff; /*白色边框*/
height:1em;
position:relative;
}
注意 这里要注意两点
（1）倒数第二行的设置，为每一个菜单项设置了边框，而边框的颜色与背景色相同。这是由于将来在鼠标指针经过时候会出现红色的边框，因此为了前后不产生跳动，这里加上了一个与红色边框相同粗细的边框。虽然看不见它，实施可以防止鼠标指针经过时产生跳动。
（2）最后一行样式的设置，将菜单项的CSS盒子设为了相对定位。这实际上并不是要改变菜单项本身的位置，而是要通过这个设置使菜单项的CSS盒子成为了一个“包含块”，从而能够使它下属的CSS盒子以它为基准进行定位。
制作到这里，在浏览器中的显示如图
首先制作鼠标经过时红色边框
#menu a:hover{
border-color:#c00;
}
然后对span的共同属性进行设置，代码如下：
#menu a:hover span{
display:block;
height:0;
0;
overflow:hidden; /*防止溢出*/
border:solid 8px #fff;
top:4px; /*设置竖直方向的定位*/
position:absolute; /*绝对定位*/
}
接下来需要设置各自不同的属性，代码如下
#menu a:hover span.left{
border-left-color:#c00;
left:8px;
}
#menu a:hover span.right{
border-right-color:#c00;
right:8px;
}
最终的效果如图
最后再来解释一下
现在如果把这行代码删除，那么测试效果如图所示
在Firefox和IE中的不同效果
可以看到Firefox中显示的效果依然正确，但是在IE中就不正确了，这时因为即使span中没有任何内容，IE也会认为有默认的行高。加入这一行CSS代码，就可以使IE也能中也实现期望的效果了。