菜单显示不同效果
Posted firstflying
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了菜单显示不同效果相关的知识，希望对你有一定的参考价值。
菜单效果显示：
代码：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>菜单导航</title> <style type="text/css"> *{ margin: 0; padding: 0; } li { list-style: none; } a { text-decoration: none; } .Nav{ background: #00008b; min-width: 1000px; min-height: 40px; } .menu { width: 600px; margin: 0 auto; } .menu:after{ clear: both; content: ""; display: block; } .menu>li { float: left; width: 100px; text-align: center; line-height: 40px; } .menu>li>a{ color: white; } .menu>li>a+ul>li>a{ color: white; } /*下拉菜单*/ .menu>li>a+.one{ position: absolute; width: 100px; background: #00008B; opacity: 0.5; /*display: none;*/ height: 0; overflow: hidden; transition: .5s; } .menu>li:hover .one{ height: 130px; } /*显示隐藏*/ .menu>li>a+.two{ position: absolute; width: 100px; background: #00008B; opacity: 0.5; display: none; } .menu>li:hover .two{ display: block; } /*翻转菜单*/ .menu>li>a+.there{ position: absolute; width: 100px; background: #00008B; opacity: 0.5; display: none; } .menu>li:hover .there{ display: block; animation:MenuNav 2s; } @keyframes MenuNav{ /*定义动画时，简单的动画可以直接使用关键字from和to，即从一种状态过渡到另一种状态*/ from{ /*opacity: 1;*/ -webkit-transform:rotateY(0deg); } to{ /*opacity: 0.2;*/ -webkit-transform:rotateY(360deg); } } </style> </head> <body> <div class="Nav"> <ul class="menu"> <li> <a href="#">首页</a> </li> <li> <a href="#">联系我们</a> <ul class="one"> <li> <a href="#">版权声明</a> </li> <li> <a href="#">在线留言</a> </li> <li> <a href="#">技术支持</a> </li> </ul> </li> <li> <a href="#">公司掠影</a> <ul class="two"> <li> <a href="#">版权声明</a> </li> <li> <a href="#">在线留言</a> </li> <li> <a href="#">技术支持</a> </li> </ul> </li> <li> <a href="#">新闻中心</a> <ul class="there"> <li> <a href="#">版权声明</a> </li> <li> <a href="#">在线留言</a> </li> <li> <a href="#">技术支持</a> </li> </ul> </li> <li> <a href="#">版权声明</a> </li> <li> <a href="#">技术支持</a> </li> </ul> </div> </body> </html>
以上是关于菜单显示不同效果的主要内容，如果未能解决你的问题，请参考以下文章