A amazed menu

HTML代码：

<ul id="slant">
2      <li><a href="#nogo1"><b class="p1"></b><b class="p2"></b><b class="p3"></b><b class="p4"></b><b class="p5"></b><em>Item One</em><span></span></a></li>
3      <li><a href="#nogo2"><b class="p1"></b><b class="p2"></b><b class="p3"></b><b class="p4"></b><b class="p5"></b><em>Item Two</em><span></span></a></li>
4      <li><a href="#nogo2"><b class="p1"></b><b class="p2"></b><b class="p3"></b><b class="p4"></b><b class="p5"></b><em>Longer Item Three</em><span></span></a></li>
5      <li><a href="#nogo2"><b class="p1"></b><b class="p2"></b><b class="p3"></b><b class="p4"></b><b class="p5"></b><em>Four</em><span></span></a></li>
6      <li><a href="#nogo2"><b class="p1"></b><b class="p2"></b><b class="p3"></b><b class="p4"></b><b class="p5"></b><em>.. and Five</em><span></span></a></li>
7      <li><a href="#nogo2"><b class="p1"></b><b class="p2"></b><b class="p3"></b><b class="p4"></b><b class="p5"></b><em>6</em><b class="p6"></b><b class="p7"></b><b class="p8"></b><b class="p9"></b><b class="p10"></b></a></li>
8</ul>

 

CSS代码：

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

 

转：http://www.codebit.cn/index.php