箭头菜单

菜单效果：

源代码如下
：


   
#menu {      /*对menu层设置*/
  font-family:arial;    /*字体*/
  font-size:16px;    /*字号*/
  width:140px;     /*宽度*/
  margin:0 auto;    /*菜单项之间间隔0.5em，并水平居中*/
  border:solid 1px #ccc;   /*灰色细边框*/
  }
#menu a, #menu a:visited {
 text-decoration:none;    /*文字无下划线*/
 text-align:center;     /*文字水平居中对齐*/
 color:#c00;  #    /*红色文字*/
 display:block;    /*设置为块级元素*/
 padding:4px;     /*内边距*/
 background-color:#fff;    /*背景色*/
 border:solid 1px #fff;   /*与背景色相同边框，防止跳动*/
 position:relative;    /*使用相对定位*/
 width:130px;
 }
#menu a span {
 display:none;
}
#menu a:hover {
 border-color:#c00;    /*边框颜色红色*/
}
 
#menu a:hover span {
 display:block;     /*设置为块级元素*/
 position:absolute;     /*使用绝对定位*/
 height:0;      /*高度为0*/
 width:0;      /*宽度为0*/
 border:solid 8px #fff;   /*设置默认的边框样式*/
 top:4px;     /*竖直方向的定位*/
 overflow:hidden;
 }
 #menu a:hover span.left {
 border-left-color:#c00;
 left:8px;
 }
 #menu a:hover span.right {
 border-right-color:#c00;
 right:8px;
 }
箭头菜单
   
     
       
     home
       
     
       
           contact us
     
     
     
   web dev
       
     
 
      web design
         
     
     
   map
       

----------------------------------------------
此篇文章从博客转发
原文地址： Http://blog.gkong.com/more.asp?id=85716&Name=gufeiyan