箭头菜单

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>箭头菜单</title>
<style type="text/css">
#menu {
    font-family:Arial, Helvetica, sans-serif;
    font-size:14px;
    width:140px;
    margin:0 auto;
    border:solid 1px #ccc;
}
#menu a, #menu a:visited {
    text-decoration:none;
    text-align:center;
    color:#000;
    display:block;
    padding:4px;
    background-color:#fff;
    border:solid 1px #fff;
    position:relative;
}
#menu a:hover {
    border-color:#c00;
}
#menu a:hover span {
    display:block;
    position:absolute;
    height:0px;
    width:0px;
    overflow:hidden;
    border:8px solid #fff;
    top:4px;
}
#menu a:hover span.left {
    border-left-color:#c00;
    left:8px;
}
#menu a:hover span.right {
    border-right-color:#c00;
    right:8px;
}
</style>
</head>
<body>
<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>
</body>
</html>

posted @ 2008-09-10 16:04  奋斗的萌丫头  阅读(242)  评论(0编辑  收藏  举报