双斜角横线菜单
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>双斜角横线菜单</title>
<style>
<!--
/*对menu层设置*/
#menu {
width:9em;
margin:0 auto;
font-family:Arial;
font-size:14px;
border:1px solid #aaa;
}
/*设置菜单选项*/
#menu a,#menu a:visited {
display:block;
text-decoration:none;
color:#000;
height:1.4em;
border:0.5em solid #fff;
}
#menu a:hover {
color:#FFFFFF;
background-color:#aaa;
border-color:#ddd #aaa; /*上下边框为浅灰色，左右与背景颜色相同*/
}
-->
</style>
</head>
<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>
</html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>双斜角横线菜单</title>
<style>
<!--
/*对menu层设置*/
#menu {
width:9em;
margin:0 auto;
font-family:Arial;
font-size:14px;
border:1px solid #aaa;
}
/*设置菜单选项*/
#menu a,#menu a:visited {
display:block;
text-decoration:none;
color:#000;
height:1.4em;
border:0.5em solid #fff;
}
#menu a:hover {
color:#FFFFFF;
background-color:#aaa;
border-color:#ddd #aaa; /*上下边框为浅灰色，左右与背景颜色相同*/
}
-->
</style>
</head>
<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>
</html>
