怎么使用CSS3创建动态菜单

设置菜单的背景：这里我们将把导航的背景设置为黑色。同时，需要指出的是，宽度、高度和内边距为可选项，可以不设置。代码如下：.css3Menus {     background: #14080a;     width:506px;     height:260px;     padding:20px;     }

利用border-radius，制作圆形导航：在这个步骤中，我们会利用CSS3的一些酷的功能，尤其是border-radius ，将每个列表项的背景设置为黄色，形状为圆形。：代码如下：ul {     list-style: none;     }         li {     float:left;     font: 14px/10px Arial, Verdana, sans-serif;     color:#FFF;     background-color:#CCCC00;     width: 80px;     height: 80px;     padding:20px;     margin:0 30px 0 0;     -webkit-border-radius: 60px;     -moz-border-radius: 60px;     border-radius: 60px;     }

设置菜单的对齐方式：本步骤中，我们将为每个列表项设置特定的背景颜色与位置：li#menu1 {     background-color: #00FFCC;     }     li#menu2 {     background-color: #CC9900;     margin-top:100px;     }     li#menu3 {     background-color: #33FF66;     margin-top:50px;     }

设置菜单中链接的对齐方式：li a {     color:#FFF;     text-decoration:none;     display:block;     width: 80px;     height: 45px; text-align: center;     padding:35px 0 0 0;     margin:0 40px 0 0;     -webkit-border-radius: 40px;     -moz-border-radius: 40px;     border-radius: 40px;     }     li#menu1 a {     background-color: #FF0000;     }     li#menu2 a {     background-color: #660033;     }     li#menu3 a {     background-color: #66CCCC;     }

定义另一种效果，当鼠标悬浮在链接上时进行展现：li a:hover,     li a:focus,     li a:active {     width: 120px;     height:65px;     padding:55px 0 0 0;     margin:-20px 0 0 -20px;     -webkit-border-radius: 60px;     -moz-border-radius: 60px;     border-radius: 60px;     }

为导航添加最后的效果：代码如下：li a:hover,     li a:focus,     li a:active {     -webkit-animation-name:bounce;     -webkit-animation-duration:1s;     -webkit-animation-iteration-count:4;     -webkit-animation-direction:alternate;     }     @-webkit-keyframes bounce{from{margin:0 40px 0 0;}     to{margin:120px 40px 0 0;}     }