上面是一个效果图，代码在下面：
html
XML/HTML Code复制内容到剪贴板 <nav> <ulclass="nav-ul"> <li> <ahref="/">首页</a> </li> <li> <ahref="/category/frontend">Web前端</a> <ul> <liclass="nav-effect-1"> <ahref="/category/frontend/javascript">JavaScript</a> </li> <liclass="nav-effect-2"> <ahref="/category/frontend/jq">JQuery</a> </li> <liclass="nav-effect-3"> <ahref="/category/frontend/style">CSS</a> </li> <liclass="nav-effect-4"> <ahref="/category/frontend/html">HTML</a> </li> </ul> </li> <li> <ahref="/category/end">后端</a> <ul> <liclass="nav-effect-1"> <ahref="/category/end/python-end">Python</a> </li> <liclass="nav-effect-2"> <ahref="category/end/php">PHP</a> </li> </ul> </li> <li> <ahref="/category/trivial">琐碎杂类</a> <ul> <liclass="nav-effect-1"> <ahref="/category/trivial/linux">Linux</a> </li> <liclass="nav-effect-2"> <ahref="/category/trivial/ajax">Ajax</a> </li> </ul> </li> <li> <ahref="/category/life">我的生活</a> <ul> <liclass="nav-effect-1"> <ahref="/category/life/college">College</a> </li> <liclass="nav-effect-2"> <ahref="/category/life/review">Review</a> </li> <liclass="nav-effect-3"> <ahref="/category/life/sentiment">Sentiment</a> </li> </ul> </li> <li> <ahref="#">关于我</a> <ul> <liclass="nav-effect-1"> <ahref="/contribute">友情链接</a> </li> <liclass="nav-effect-2"> <ahref="/message">留言板</a> </li> </ul> </li> </ul> </nav>
css:
CSS Code复制内容到剪贴板 *{ margin:0auto; } body{ background-color:#EEEEEE; font-family:MicrosoftYahei,Arial,sans-serif; } nav{ width:100%; background-color:#455552; position:relative; width:650px; margin-top:100px; } .nav-ul{ list-style:none; } .nav-ul>li{ display:inline-block; position:relative; } .nav-ula{ text-decoration:none; color:#FFF; display:inline-block; padding:10px20px; } .nav-ula:hover{ background-color:#1ABC9C; } .nav-ula:hover+ulli{ opacity:1; -webkit-transform:rotateY(0deg); transform:rotateY(0deg); } .nav-ula+ul{ list-style:none; position:absolute; transition:opacity0.5s; -webkit-perspective:800; -webkit-transform-style:preserve-3d; } .nav-ula+ul:hoverli{ opacity:1; -webkit-transform:rotateY(0deg); transform:rotateY(0deg); } .nav-ula+ulli{ position:relative; left:-40px; opacity:0; width:150px; transition:transform1.5s,opacity0.8s; } .nav-ula+ula{ display:inline-block; width:75%; background-color:rgba(26,188,156,0.75); } .nav-effect-1{ transform:rotateY(90deg)translateX(10px); } .nav-effect-2{ transform:rotateY(120deg)translateX(20px); } .nav-effect-3{ transform:rotateY(150deg)translateX(30px); } .nav-effect-4{ transform:rotateY(180deg)translateX(40px); } .nav-ula+ula:hover{ background-color:rgba(69,85,82,0.75); }
查看demo：demo
【CSS3的一个简单导航栏实现】相关文章：
★ CSS line-height行高上下居中垂直居中样式属性