会跳起的多彩菜单

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
< html  xmlns ="http://www.w3.org/1999/xhtml" >
< head >
< meta  http-equiv ="Content-Type"  content ="text/html; charset=utf-8"   />
< title > 无标题文档 </ title >
< style  type ="text/css" >
ul{}{
height:26px;
margin:0px;
padding:10px;
list-style-type:none;
background:#ddd;
}
.item
{}{
    float:left;
    width:100px;
    margin:0 -1px 0 0;
    padding:0px;
    font:14px Arial;
    font-weight:bold;
}

.item p
{}{
    padding:0 0 2px 0;
    margin:0px;
    text-align:center;
    background:#cc6;
    border:solid 1px #000;
    border-top-width:0px;
}
.item div
{}{
height:1px;
overflow:hidden;
background:#cc6;
border-left:solid 1px #000;
border-right:solid 1px #000;
}
.item .row1{}{
margin:0 5px;
background-color:#000;
}
.item .row2{}{
margin:0 3px;
border:0 2px;
}
.item .row3
{}{
margin:0 2px;
}
.item .row4
{}{
margin: 0 1px;
height:2px;
}
.item a,.item a:visited{}{
color:#000;
text-decoration:none;
}
.item a:hover p{}{
background:#884;
color:#fff;
padding-bottom:12px;
}
.item a:hover .row2,
.item a:hover .row3,
.item a:hover .row4
{}{
background:#884;
}
.item .pad{}{
height:10px;
border:0px;
background:transparent;
}
.item a:hover .pad{}{
height:0px;
}
</ style >
</ head >

< body >
< ul >
     < li  class ="item" >
         < a  href ="#" >
             < div  class ="pad" ></ div >
             < div  class ="row1" ></ div >
             < div  class ="row2" ></ div >
             < div  class ="row3" ></ div >
             < div  class ="row4" ></ div >
             < p > Hoem </ p >
         </ a >
     </ li >
     < li  class ="item" >
         < a  href ="#" >   
             < div  class ="pad" ></ div >       
             < div  class ="row1" ></ div >
             < div  class ="row2" ></ div >
             < div  class ="row3" ></ div >
             < div  class ="row4" ></ div >< p > Contact </ p ></ a >
     </ li >
     < li  class ="item" >
         < a  href ="#" >
             < div  class ="pad" ></ div >         
             < div  class ="row1" ></ div >
             < div  class ="row2" ></ div >
             < div  class ="row3" ></ div >
             < div  class ="row4" ></ div >
        < p > Web Dev </ p ></ a >
     </ li >
     < li  class ="item" >
     < a  href ="#" >  
             < div  class ="pad" ></ div >    
             < div  class ="row1" ></ div >
             < div  class ="row2" ></ div >
             < div  class ="row3" ></ div >
             < div  class ="row4" ></ div >
     < p > Web Design </ p ></ a >
     </ li >
     < li  class ="item" >
     < a  href ="#" >
             < div  class ="pad" ></ div >     
             < div  class ="row1" ></ div >
             < div  class ="row2" ></ div >
             < div  class ="row3" ></ div >
             < div  class ="row4" ></ div >
     < p > Map </ p ></ a >
     </ li >
</ ul >
</ body >
</ html >

上面是实现跳动效果
下面实现多彩效果

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
< html  xmlns ="http://www.w3.org/1999/xhtml" >
< head >
< meta  http-equiv ="Content-Type"  content ="text/html; charset=utf-8"   />
< title > 无标题文档 </ title >
< style  type ="text/css" >
ul{}{
height:26px;
margin:0px;
padding:10px;
list-style-type:none;
background:#ddd;
}
.item
{}{
    float:left;
    width:100px;
    margin:0 -1px 0 0;
    padding:0px;
    font:14px Arial;
    font-weight:bold;
}

.item p
{}{
    padding:0 0 2px 0;
    margin:0px;
    text-align:center;
    background:#cc6;
    border:solid 1px #000;
    border-top-width:0px;
}
.item div
{}{
height:1px;
overflow:hidden;
background:#cc6;
border-left:solid 1px #000;
border-right:solid 1px #000;
}
.item .row1{}{
margin:0 5px;
background-color:#000;
}
.item .row2{}{
margin:0 3px;
border:0 2px;
}
.item .row3
{}{
margin:0 2px;
}
.item .row4
{}{
margin: 0 1px;
height:2px;
}
.item a,.item a:visited{}{
color:#000;
text-decoration:none;
}
.item a:hover p{}{
background:#884;
color:#fff;
padding-bottom:12px;
}
.item a:hover .row2,
.item a:hover .row3,
.item a:hover .row4
{}{
background:#884;
}
.item .pad{}{
height:10px;
border:0px;
background:transparent;
}
.item a:hover .pad{}{
height:0px;
}
.orange p,
.orange .row2,
.orange .row3,
.orange .row4
{}{
background:#fa0;
}

.orange a:hover p,
.orange a:hover .row2,
.orange a:hover .row3,
.orange a:hover .row4
{}{
background:#fa0;
}

.yellow p,
.yellow .row2,
.yellow .row3,
.yellow .row4
{}{
background:#ff0;
}

.yellow a:hover p,
.yellow a:hover .row2,
.yellow a:hover .row3,
.yellow a:hover .row4
{}{
background:#ff0;
}
</ style >
</ head >

< body >
< ul >
     < li  class ="item orange" >
         < a  href ="#" >
             < div  class ="pad" ></ div >
             < div  class ="row1" ></ div >
             < div  class ="row2" ></ div >
             < div  class ="row3" ></ div >
             < div  class ="row4" ></ div >
             < p > Hoem </ p >
         </ a >
     </ li >
     < li  class ="item yellow" >
         < a  href ="#" >   
             < div  class ="pad" ></ div >       
             < div  class ="row1" ></ div >
             < div  class ="row2" ></ div >
             < div  class ="row3" ></ div >
             < div  class ="row4" ></ div >< p > Contact </ p ></ a >
     </ li >
     < li  class ="item" >
         < a  href ="#" >
             < div  class ="pad" ></ div >         
             < div  class ="row1" ></ div >
             < div  class ="row2" ></ div >
             < div  class ="row3" ></ div >
             < div  class ="row4" ></ div >
        < p > Web Dev </ p ></ a >
     </ li >
     < li  class ="item" >
     < a  href ="#" >  
             < div  class ="pad" ></ div >    
             < div  class ="row1" ></ div >
             < div  class ="row2" ></ div >
             < div  class ="row3" ></ div >
             < div  class ="row4" ></ div >
     < p > Web Design </ p ></ a >
     </ li >
     < li  class ="item" >
     < a  href ="#" >
             < div  class ="pad" ></ div >     
             < div  class ="row1" ></ div >
             < div  class ="row2" ></ div >
             < div  class ="row3" ></ div >
             < div  class ="row4" ></ div >
     < p > Map </ p ></ a >
     </ li >
</ ul >
</ body >
</ html >

转载于:https://www.cnblogs.com/suzongwei/archive/2008/06/14/1221038.html