CSS菜单

< html >
< head >
< STYLE  type =text/css >
#navigation {}{
  background:#99CCFF; 
  width:715px; 
  margin:0 auto; 
  height:38px; 
/**//* hide overflow:hidden from IE5/Mac */ 
/**//* /*/ 
overflow: hidden; 
/**//* */ 
}

#navigation ul {}{
  margin:0; 
  padding:0; 
  list-style-type:none; 
  background:transparent;
  }
#navigation li {}{
  display:block; 
  float:left; 
  margin:0 1px;
  }
#navigation .snazzy {}{
  background:transparent;
  }
#navigation .snazzy span {}{
    text-align:center;
    color:#fff;
    margin:0;
    font-weight: normal;
  }
#navigation .b1, #navigation .b2, #navigation .b3, #navigation .b4 {}{
  display:block; 
  font-size:1px;
/**//* hide overflow:hidden from IE5/Mac */ 
/**//* /*/ 
overflow: hidden; 
/**//* */ 
}
#navigation .b1, #navigation .b2, #navigation .b3 {}{
  height:1px;
  }
#navigation .b2, #navigation .b3, #navigation .b4 {}{
  border-left:1px solid #fff; 
  border-right:1px solid #fff;
  }
#navigation .b1 {}{
  margin:0 5px; 
  background:#fff;
  }
#navigation .b2 {}{
  margin:0 3px; 
  border-width:0 2px;
  }
#navigation .b3 {}{
  margin:0 2px;
  }
#navigation .b4 {}{
  height:2px; 
  margin:0 1px;
  }
#navigation .boxcontent {}{
  display:block; 
  border-left:1px solid #fff; 
  border-right:1px solid #fff;
  }

#navigation a.menu, #navigation a.menu:visited {}{
    display:block;
    text-decoration:none;
    width:100px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
  }

#navigation a.current span, #navigation a.current:visited span {}{
  padding-top:10px;
  }

#navigation a.menu:hover {}{
  background:transparent; 
  cursor:pointer;
  }

#navigation a.current:hover {}{
  cursor:default;
  }

#navigation a.menu:hover span {}{
  padding-top:10px;
  }


#navigation .red {}{background:#c00;}
#navigation .orange {}{background:#f90;}
#navigation .yellow {}{background:#b8b800;}
#navigation .green {}{background:#090;}
#navigation .blue {}{background:#00c;}
#navigation .indigo {}{background:#309;}
#navigation .violet {}{background:#c6c;}
#navigation .lace {}{background:#e0e0d5;}
#navigation .slate {}{background:#bcdae9;}
#navigation .salmon {}{background:#ffa07a;}
#navigation .mint {}{background:#f5fffa;}

span {}{background:#000}
</ STYLE >
</ head >

< body >
< center >
< DIV  id =navigation >
< UL >
< LI >< A  class =menu  title ="AccessKey: a"  accessKey =a  href ="../menu/index.html" >< B  class =snazzy >< SPAN  class ="boxcontent red" > Demos </ SPAN >   < B  class ="b4 red" ></ B >< B  class ="b3 red" ></ B >< B  class ="b2 red" ></ B >< B  class =b1 ></ B ></ B ></ A ></ LI >
< LI >< A  class =menu  title ="AccessKey: b"  accessKey =b  href ="../menus/index.html" >< B  class =snazzy >< SPAN  class ="boxcontent orange" > Menus </ SPAN >   < B  class ="b4 orange" ></ B >< B  class ="b3 orange" ></ B >< B  class ="b2 orange" ></ B >< B  class =b1 ></ B ></ B ></ A ></ LI >
< LI >< A  class ="menu current"  title ="AccessKey: c"  accessKey =c  href ="#nogo" >< B  class =snazzy >< SPAN  class ="boxcontent yellow" > Layouts </ SPAN >   < B  class ="b4 yellow" ></ B >< B  class ="b3 yellow" ></ B >< B  class ="b2 yellow" ></ B >< B  class =b1 ></ B ></ B ></ A ></ LI >
< LI >< A  class =menu  title ="AccessKey: d"  accessKey =d  href ="../boxes/index.html" >< B  class =snazzy >< SPAN  class ="boxcontent green" > Boxes </ SPAN >   < B  class ="b4 green" ></ B >< B  class ="b3 green" ></ B >< B  class ="b2 green" ></ B >< B  class =b1 ></ B ></ B ></ A ></ LI >
< LI >< A  class =menu  title ="AccessKey: e"  accessKey =e  href ="../mozilla/index.html" >< B  class =snazzy >< SPAN  class ="boxcontent blue" > Mozilla </ SPAN >   < B  class ="b4 blue" ></ B >< B  class ="b3 blue" ></ B >< B  class ="b2 blue" ></ B >< B  class =b1 ></ B ></ B ></ A ></ LI >
< LI >< A  class =menu  title ="AccessKey: f"  accessKey =f  href ="../ie/index.html" >< B  class =snazzy >< SPAN  class ="boxcontent indigo" > Explorer </ SPAN >   < B  class ="b4 indigo" ></ B >< B  class ="b3 indigo" ></ B >< B  class ="b2 indigo" ></ B >< B  class =b1 ></ B ></ B ></ A ></ LI >
< LI >< A  class =menu  title ="AccessKey: g"  accessKey =g  href ="../opacity/index.html" >< B  class =snazzy >< SPAN  class ="boxcontent violet" > Opacity </ SPAN >   < B  class ="b4 violet" ></ B >< B  class ="b3 violet" ></ B >< B  class ="b2 violet" ></ B >< B  class =b1 ></ B ></ B ></ A ></ LI ></ UL >
</ DIV > <!--  end of navigation  -->
</ center >
</ body >
</ html >