CSS实现带箭头的垂直导航菜单

用CSS制作带箭头的菜单主要是实现箭头,下面为代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>箭头菜单</title>
<style type="text/css">
.menu {
font-family:Arial;
font-size:16px;
width:140px;
border:solid 1px #CCCCCC;
margin:0 auto;
}
.menu a,.menu a:visited {
text-decoration:none;
text-align:center;
color:#CC0000;
display:block;
padding:4px;
background-color:#FFFFFF;
border:solid 1px #FFFFFF;
position:relative;
}
.menu a:hover {
border-color:#CC0000;
}
.menu a span {
display:none;
}
.menu a:hover span {
display:block;
position:absolute;
height:0;
width:0;
overflow:hidden;
border:solid 8px #FFFFFF;
top:4px;
}
.menu a:hover span.left {
border-left-color:#CC0000;
left:8px;
}
.menu a:hover span.right {
border-right-color:#CC0000;
right:8px;
}
.menu a:hover span.tip {
color:#000000;
font-size:12px;
display:block;
position:absolute;
left:150px;
top:0px;
width:100px;
height:auto;
padding:5px;
background-color:#EEEEEE;
border:1px dashed #223344;
}
</style>
</head>
<body>
<div class="menu">
<a href="#">
<span class="left"></span>
Home
<span class="right"></span>
<span class="tip">这里说明Home菜单项</span>
</a>
<a href="#">
<span class="left"></span>
Contact
<span class="right"></span>
<span class="tip">这里说明Contact菜单项</span>
</a>
<a href="#">
<span class="left"></span>
Web Dev
<span class="right"></span>
<span class="tip">这里说明Web Dev菜单项</span>
</a>
<a href="#">
<span class="left"></span>
Web Design
<span class="right"></span>
<span class="tip">这里说明Web Design菜单项</span>
</a>
<a href="#">
<span class="left"></span>
Map
<span class="right"></span>
<span class="tip">这里说明Map菜单项</span>
</a>
</div>
</body>
</html>

posted @ 2012-05-29 00:20  likebeta  阅读(4305)  评论(0)  编辑  收藏  举报