<div+css>菜单两侧时箭头并显示信息源代码

最新推荐文章于 2021-10-19 22:34:41 发布

weixin_30711917

最新推荐文章于 2021-10-19 22:34:41 发布

阅读量107

点赞数

原文链接：http://www.cnblogs.com/shangcheng/archive/2011/09/29/2195267.html

版权

}
#menu a,#menu a:visited{
text-decoration:none;
text-align:center;
color:#c00;
display:block;
padding:4px;
background-color:#fff;
border:solid 1px #fff;
height:lem;
position:relative;
}
#menu a:hover{
border-color:#c00;
}
#menu a:hover span{
display:block;
height:0px;
width:0px;
border:solid 8px #fff;
top:4px;
position:absolute;

}
#menu a:hover span.left{
border-left-color:red;
left:8px;

}
#menu a:hover span.right{
border-right-color:red;
right:8px;
}
#menu a:hover span.info{
display:block;
right:-150px;
width:120px;
height:auto;

}
#menu a span.info,#menu a:visited span.info{
display:none;
}
</style>
</head>

<body>
<div id="menu">
<a href="#">Home这是Home</a>
<a href="#">Contact Us这是Contact Us</a>
<a href="#">Web Dev这是Web Dev</a>
<a href="#">Web Design这是Web Design</a>
<a href="#">Map这是Map</a>
</div>
</body>

注：以上的颜色、距离，自己设定，没有局限

转载于:https://www.cnblogs.com/shangcheng/archive/2011/09/29/2195267.html