发新话题
打印

箭头菜单

箭头菜单

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
<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>
换个头像,看见广告就眼红,直接封ID。

TOP

CSS是很强的。
用#是可以自己在标签中定义的,上面所示的
<span class="menu"></span>
换个头像,看见广告就眼红,直接封ID。

TOP

发新话题