CSS菜单双斜角横线菜单

本案例和上一个案例相同的HTML结构如下：

<body>
<div id="menu">
<a href="#">Home</a>
<a href="#">Contact Us</a>
<a href="#">Web Dev</a>
<a href="#">Web Design</a>
<a href="#">Map</a>
</div>
</body>

对于#menu容器的设置如下

#menu{
    9em;         /*宽度*/
    margin:0 auto;        /*水平居中*/
    font-family:Arial, Helvetica, sans-serif; /*字体*/
    font-size:14px;         /*字号*/
    border:1px solid #aaa;    /*细灰色边框*/
}

在对#menu的设置中，宽度使用的是相对单位em，而不像上一个例子，使用像素作为单位，代码如下：

#menu a, #menu a:visiten{        /*设置菜单选项*/
    display:block;                /*设置为块级元素*/
    text-decoration:none;        /*无下划线*/
    color:#000;                    /*黑色文字*/
    line-height:2em;            /*高度*/
    border:0.5em solid #fff;    /*白色背景，防止跳动*/
}

#menu a:hover{
    color:#fff;
    background-color:#aaa;         /*深灰色背景色*/
    border-color:#ddd #aaa;        /*上下边框浅灰色，左右与背景色相同*/
}

使用相对单位的优势是，当访问者在浏览器调整了文字的大小，#menu容器的大小可以自动调整，以适用文字大小变化。

最终效果如图：

可以看出，这个边框在鼠标指针未经过之前就已经存在了，只是和背景颜色相同，所以看不出边框。而当鼠标指针经过时，边框的颜色发生改变，边框就显现出来了。