双坚线菜单
<html>
<head>
<title>双坚线菜单</title>
<style>
<!--
/*对menu层设置*/
#menu {
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
width: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>
<head>
<title>双坚线菜单</title>
<style>
<!--
/*对menu层设置*/
#menu {
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
width: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>
