CSS3技術卓越的引入了眾多動畫效果，其中下拉菜單動畫是一個很有趣的效果。下面我們就通過代碼分析來學習如何使用純CSS3實現下拉菜單動畫。
html{
font-family: sans-serif;
font-size: 14px;
}
#menu{
margin: 0;
padding: 0;
list-style: none;
position: relative;
float: left;
z-index: 999;
}
#menu li{
width: 200px;
margin: 0;
padding: 0;
background-color: #f3f3f3;
border-bottom: solid 1px #dedede;
position: relative;
}
#menu >li{
float: left;
}
#menu >li:last-child{
border-right-style: none;
}
.submenu{
position: absolute;
left: -99999em;
background-color: #fff;
border: 1px solid #dedede;
margin-top: 1px;
z-index: 999;
}
#menu li:hover .submenu{
left: auto;
margin-top: 0;
width: auto;
border-right-style: solid;
}
.submenu li{
width: 200px;
margin: 0;
padding: 5px 10px;
border-bottom: 1px solid #dedede;
text-align: center;
}
.submenu li a{
display: block;
color: #000;
text-decoration: none;
}
.submenu li:last-child{
border-bottom-style: none;
}
#menu li a{
display: block;
padding: 5px 10px;
color: #000;
text-decoration: none;
}
#menu ul ul{
margin-left: 199px;
top: 0;
}實現一顆樹，需要一個祖先節點和多個子節點。CSS3下拉菜單動畫同理需要一個父級菜單，和一個下拉的子菜單。我們的代碼中創建了一個無序列表，樣式設置好后，將li設置為一個定位的父級菜單容器，并給子列表添加一個定位，并將它隱藏在父級內部，默認情況下，當鼠標移動到父級容器時，展示下拉子菜單，移除鼠標時，隱藏下拉子菜單。
以上代碼中我們使用無序列表實現了一個簡單的站點菜單，下拉菜單動畫實現代碼也已經完整編寫出來。如果需要其他菜單樣式，可以修改相應的CSS代碼來實現。這里提供的代碼只是一個簡單的演示，希望能夠對你有所幫助。
上一篇mysql商店數據庫閃退
下一篇mysql主從可以跨網