效果如下：
http://blog.gkong.com/uploadfile3/2009426213939201.jpg
代码如下：
   
 #menu {
   font-family:arial;　/*设置字体*/
   font-size:14px;  /*字号子*/
   }
   
    #menu a, #menu a:visited {
  display:block;
  float:left;
   position:relative; /*设置为相对定位，目的是为下面的斜角定位做准备，斜角将以此为标准定位*/
   background-color:#c00; /*背景色为红色*/
   color:#fff;     /*字体为白色*/
   text-decoration:none; /*去掉链接的下划线*/
   padding:6px;   /*文字的内边距*/
   margin:1px 0 0 1px;  /**/
   }
 
  #menu a span{     /*这部分代码将产生斜角*/
  height:0;
  width:0;
  border-bottom:solid 6px #c00;
  border-left:solid 6px #fff;
  position:absolute;
  top:0;
  left:0;
  overflow:hidden;
  }
   
 #menu a:hover{    /*将鼠标经过时背影色变色，文字变色*/
 background-color: #f90;
 color:#333
 }
 
 #menu a:hover span{
 border-bottom:solid 6px #f90; /*将斜角的颜色跟背景色相同*/
 }
 
   

自适应的水平的菜单
   
     
       
     home  
     
       
           contact us
     
     
   web dev  
     
 
      web design  
     
     
   map
   
----------------------------------------------
此篇文章从博客转发
原文地址： Http://blog.gkong.com/more.asp?id=85731&Name=gufeiyan

这段程序是用在HMI的编程中，还是做网页用的？

是用来做网页的