css menu

html代码：

 <ul id="slant">
      <li><a href="#nogo1"><strong class="p1"></strong><strong class="p2"></strong><v class="p3"><strong class="p4"></strong><strong class="p5"></strong><em>Item One</em></v></a> </li>
      <li><a href="#nogo2"><strong class="p1"></strong><strong class="p2"></strong><v class="p3"><strong class="p4"></strong><strong class="p5"></strong><em>Item Two</em></v></a> </li>
      <li><a href="#nogo2"><strong class="p1"></strong><strong class="p2"></strong><v class="p3"><strong class="p4"></strong><strong class="p5"></strong><em>Longer Item Three</em></v></a> </li>
      <li><a href="#nogo2"><strong class="p1"></strong><strong class="p2"></strong><v class="p3"><strong class="p4"></strong><strong class="p5"></strong><em>Four</em></v></a> </li>
      <li><a href="#nogo2"><strong class="p1"></strong><strong class="p2"></strong><v class="p3"><strong class="p4"></strong><strong class="p5"></strong><em>.. and Five</em></v></a> </li>
      <li><a href="#nogo2"><strong class="p1"></strong><strong class="p2"></strong><v class="p3"><strong class="p4"></strong><strong class="p5"></strong><em>6</em><strong class="p6"></strong><strong class="p7"></strong><strong class="p8"></strong><strong class="p9"></strong><strong class="p10"></strong></v></a> </li>
 </ul>

css代码：

  1 <style type="text/css" media="all">
  2 /* the stylesheet */
  3 #slant {
  4 padding:0;
  5 margin:0;
  6 list-style:none;
  7 }
  8 #slant li {
  9 float:left;
 10 text-align:center;
 11 }
 12 #slant a {
 13 display:block;
 14 text-decoration:none;
 15 }
 16 #slant a em {
 17 font-style:normal;
 18 display:block;
 19 padding:0 15px;
 20 height:25px;
 21 background:#363;
 22 float:left;
 23 cursor:pointer;
 24 color:#beb;
 25 line-height:24px;
 26 }
 27 #slant a b, a span {
 28 cursor:pointer;
 29 display:block;
 30 width:0;
 31 overflow:hidden;
 32 float:left;
 33 background:#363;
 34 }
 35 #slant a span {
 36 height:0;
 37 border-top:25px solid #363;
 38 border-right:25px solid #fff;
 39 }
 40 #slant a b.p1, #slant a b.p2, #slant a b.p3, #slant a b.p4, #slant a b.p5 {
 41 border-top:5px solid #fff;
 42 border-right:5px solid #363;
 43 }
 44 #slant a b.p1 {
 45 height:0;
 46 margin-top:20px;
 47 }
 48 #slant a b.p2 {
 49 height:5px;
 50 margin-top:15px;
 51 }
 52 #slant a b.p3 {
 53 height:10px;
 54 margin-top:10px;
 55 }
 56 #slant a b.p4 {
 57 height:15px;
 58 margin-top:5px;
 59 }
 60 #slant a b.p5 {
 61 height:20px;
 62 }
 63 #slant a b.p6, #slant a b.p7, #slant a b.p8, #slant a b.p9, #slant a b.p10 {
 64 border-bottom:5px solid #fff;
 65 border-left:5px solid #363;
 66 }
 67 #slant a b.p6 {
 68 height:20px;
 69 }
 70 #slant a b.p7 {
 71 height:15px;
 72 }
 73 #slant a b.p8 {
 74 height:10px;
 75 }
 76 #slant a b.p9 {
 77 height:5px;
 78 }
 79 #slant a b.p10 {
 80 height:0;
 81 }
 82 #slant a:hover {
 83 background:#696;
 84 }
 85 #slant a:hover em {
 86 color:#030;
 87 background:#696;
 88 }
 89 #slant a:hover b.p1, #slant a:hover b.p2, #slant a:hover b.p3, #slant a:hover b.p4, #slant a:hover b.p5 {
 90 border-right-color:#696;
 91 background: #696;
 92 }
 93 #slant a:hover b.p6, #slant a:hover b.p7, #slant a:hover b.p8, #slant a:hover b.p9, #slant a:hover b.p10 {
 94 border-left-color:#696;
 95 background: #696;
 96 }
 97 #slant a:hover span {
 98 border-top-color:#696;
 99 }
 </style>

本来想直接做成html的，但是好像有点问题，请看效果图：