CSS菜单双箭头菜单

本例的目标是实现带有两侧箭头的菜单效果，这里的箭头没有使用任何背景图像文件，而是完全依靠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也能中也实现期望的效果了。