双坚线菜单

<html>
<head>
<title>双坚线菜单</title>
<style>
<!--
/*对menu层设置*/
#menu {
    font-family:Arial, Helvetica, sans-serif;
    font-size:14px;
    120px;
    padding:10px;
    background:#ccc;
    margin:0 auto;
    border:1px solid #ccc;
}
/*设置菜单选项*/
#menu a, #menu a:visited {
    display:block;
    background-color:#fff;
    padding:4px 8px;
    color:#000;
    text-decoration:none;    /*取消超级链接的下划线*/
    margin:8px 0;
    border-left:8px solid #9ab;
    border-right:8px solid #9ab;
}
#menu a:hover {
    color:#f00;
    border-left:8px solid #000;
    border-right:8px solid #000;
}
#menu a#first, #menu a#last {   /*取消第一个及最后一个与边框之间的距离*/
    margin:0;
}
-->
</style>
</head>
<body>
<div id="menu">
<a href="#" id="first">Home</a>
<a href="#">Contact Us</a>
<a href="#">Web Dev</a>
<a href="#">Web Design</a>
<a href="#" id="last">Map</a>
</div>
</body>
</html>

原文地址:https://www.cnblogs.com/kelly/p/1288439.html