CSS3仿GooglePlay菜单

CSS3仿GooglePlay菜单     < html > < head > <!--gbk,gb2312 中文编码--> < meta  http-equiv = "Content-Type"  content = "text/html; charset=utf-8"  /> <!--页面三要素--> < title >CSS3 仿GooglePlay 菜 单 </ title > < meta  name = "keywords"  content = "关键字,关键字"  /> < meta  name = "description"  content = "描述"  /> <!--js css--> < style  type = "text/css" > body { background: #E5E5E5; } ul, li { margin: 0; padding: 0; } nav { width: 200 px; height: 300 px; background: rgba( 245, 245, 245, 0.95); box-shadow: 0 px  1 px  6 px  #bebebe; margin: 30 px  0  0  200 px; } nav  ul  li { list-style: none; height: 50 px;  position: relative; } nav  ul  li  a { color: #666; text-decoration: none; font-size: 14 px;  position: absolute; left: 60 px; top: 18 px; width: 140 px;  display: block; } nav  ul  li  a :hover { color: #fff; } nav  ul  li :hover { width: 200 px; /*transition-property:all; transition-duration:0.4s; transition-timing-function:ease; transition-delay:0s;*/ transition: all  ease  0.4 s  0 s; } .store { width: 50 px; height: 50 px; background: #B3C833; } .movies { width: 50 px; height: 50 px; background: #CE5043; } .music { width: 50 px; height: 50 px; background: #FB8521; } .books { width: 50 px; height: 50 px; background: #1AA1E1; } .magazines { width: 50 px; height: 50 px; background: #5E5CA6; } .devices { width: 50 px; height: 50 px; background: #658092; } nav  ul  li  span .store_icon { position: absolute; left: 10 px; top: 12 px; width: 26 px; height: 26 px; background: url( images/icoa1.png )  no-repeat; } nav  ul  li  span .movies_icon { position: absolute; left: 10 px; top: 12 px; width: 26 px; height: 26 px; background: url( images/icoa2.png )  no-repeat; } nav  ul  li  span .music_icon { position: absolute; left: 10 px; top: 12 px; width: 26 px; height: 26 px; background: url( images/icoa3.png )  no-repeat; } nav  ul  li  span .books_icon { position: absolute; left: 10 px; top: 12 px; width: 26 px; height: 26 px; background: url( images/icoa4.png )  no-repeat; } nav  ul  li  span .magazines_icon { position: absolute; left: 10 px; top: 12 px; width: 26 px; height: 26 px; background: url( images/icoa5.png )  no-repeat; } nav  ul  li  span .devices_icon { position: absolute; left: 10 px; top: 12 px; width: 26 px; height: 26 px; background: url( images/icoa6.png )  no-repeat; } </ style > </ head > < body > < nav >      < ul >          < Li  class = "store" > < span  class = "store_icon" > </ span > < a  href = "#" > 首 页 </ a > </ Li >          < Li  class = "movies" > < span  class = "movies_icon" > </ span > < a  href = "#" > 影 视 </ a > </ Li >          < Li  class = "music" > < span  class = "music_icon" > </ span > < a  href = "#" > 音 乐 </ a > </ Li >          < Li  class = "books" > < span  class = "books_icon" > </ span > < a  href = "#" > 图 书 </ a > </ Li >          < Li  class = "magazines" > < span  class = "magazines_icon" > </ span > < a  href = "#" > 记 事 </ a > </ Li >          < Li  class = "devices" > < span  class = "devices_icon" > </ span > < a  href = "#" > 设 备 </ a > </ Li >      </ ul > </ nav > </ body > </ html >