用css边框做出带说明信息的菜单-优快云博客

本文介绍了一种实现带说明信息的菜单设计方法，包括样式定义、元素交互及提示信息展示，旨在提升用户体验。

<!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-size:16px;
width:140px;
margin:0 auto;
border:solid 1px #ccc;

}
#menu a,#menu a:visited{/*设置a(链接)*/
  text-decoration:none;
  text-align:center;
  color:#c00;
  display:block;
  padding:4px;
  background-color:#fff;
  border:solid 1px #fff;
  height:1em;}
  #menu a:hover{
   border-color:#c00;
    position:relative;/*相对定位*/
}
#menu a:hover span{/*设置span*/
display:block;
height:0px;
width:0px;
border:solid 8px #fff;
top:4px;
position:absolute;/*绝对定位*/
overflow:hidden;
}

#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{/*设置提示信息*/
 border:2px solid #ccc;
 background-color:#CCC;
 display:block;
 right:-150px;
 width:120px;
 height:50px;
}
#menu a span.info,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>
</html>