Board logo

标题: 箭头菜单 [打印本页]
作者: Nothing    时间: 2008-6-30 10:38     标题: 箭头菜单

<!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>
作者: netice    时间: 2008-6-30 20:34

   不会吧老大CSS也这么厉害。。
貌似我在CSS里都不用#号啊  

#menu {
……
}
作者: Nothing    时间: 2008-7-5 12:06

CSS是很强的。
用#是可以自己在标签中定义的，上面所示的
<span class="menu"></span>



欢迎光临 编程开发论坛 (http://bbs.lihuasoft.net/) Powered by Discuz! 6.0.0