用css来编写一个动画菜单
1、新建txt文档：桌面右击鼠标：新建->文本文档，如果新建文档没有后缀名.txt，打开计算机找到：左上角的“组织”按钮，点击进入“文件夹和搜索选项”，然后点击选项“查看”，在“高级设置”里面将“隐藏已知文件类型的扩展名”取消选定，点击右下角“应用”即可。
2、打开文本文挡编写代码：搭建框架代码：<body> <ul class="nav"> <l足毂忍珩i><a href="http://www.imooc.com">网站首页</a></li> <li><a href="#">课程大厅</a> <ul> <li><a href="#">前段课程</a> <ul> <li><a href="#">html</a></li> <li><a href="#">css</a></li> <li><a href="#">javascript</a></li> </ul> </li> <li><a href="#">手机开发</a> <ul> <li><a href="#">html</a></li> <li><a href="#">css</a></li> <li><a href="#">javascript</a></li> </ul> </li> <li><a href="#">后台编程</a> <ul> <li><a href="#">html</a></li> <li><a href="#">css</a></li> <li><a href="#">javascript</a></li> </ul> </li> </ul> </li> <li><a href="#">学习中心</a> <ul> <li><a href="#">学习进度</a> <ul> <li><a href="#">html</a></li> <li><a href="#">css</a></li> <li><a href="#">javascript</a></li> </ul> </li> <li><a href="#">编程学习</a> <ul> <li><a href="#">html</a></li> <li><a href="#">css</a></li> <li><a href="#">javascript</a></li> </ul> </li> <li><a href="#">记事本</a> <ul> <li><a href="#">html</a></li> <li><a href="#">css</a></li> <li><a href="#">javascript</a></li> </ul> </li> </ul> </li> <li><a href="#">关于我们</a> <ul> <li><a href="#">首页</a></li> <li><a href="#">相关链接</a></li> <li><a href="#">帮助</a></li> </ul></li> </ul> </body>
3、css样式倦虺赳式及鼠标触发事件代码：<style type="text/css"> .nav{ width:960px; margin:60px auto; border:1px solid; #222; background-color:#111; background-image:linear-gradient(#444,#111); border-radius:6px; box-shadow:0 3px 3px #777; padding :0; list-style:none; } .nav:before,.nav:after{ content:""; display:table; } .nav:after{ clear:both;} .nav li { float:left; border-right:1px solid #222; box-show:1px 0 0 #444; position:relative; } .nav li a{ float:left; padding :12px 30px; color:#999; font:bold 12px; text-decoration:none; text-shadow:0 1px 0#000; } .nav li a:hover{ color:#fafafa; } .nav li ul { visibility:hidden; position:absolute; list-style:none; top:38px; left:0; z-index:1; padding:0; background-color:#444; background-image:linear-gradient(#444,#111); box-shadow:0 -1 0 rgba(255,255,255,.3); border-radius:3px; opacity:0; margin:20px 0 0 0; transition: all .2s ease-in-out; } .nav li:hover > ul { opacity:1; visibility:visible; margin:0; } .nav ul li{ display:block; float:none; list-style:none; border:0; box-shadow:0 1px 0 #111,0 2px 0 #666; } .nav ul a { padding:10px; width:130px; display:block; float:none;} .nav ul a:hover { background-color:#0186ba; background-image:linear-gradient(#04acec,#0186ba) } .nav ul li:first-child>a { border-radius:3px 3px 0 0; } .nav ul li:last-child>a { border-radius:0 0 3px 3px; } .nav ul li:first-child > a:before { content:""; position:absolute; left:40px; top:-6px; border-left:6px solid transparent; border-right:6px solid transparent; border-bottom:6px solid #444; } .nav ul li:first-child > a:hover:before { border-bottom-color:#04acec; } .nav ul ul { top:0; left:150px; box-shadow:-1px 0 0 rgba(255,255,255,.3); } .nav ul ul li:first-child a:before { left:-6px; top:50%; margin-top:-6px; border-left:0; border-bottom:6px solid transparent; border-top:6px solid transparent; border-right:6px solid #3b3b3b; } .nav ul ul li:first-child a:hover:before { border-right-color:#0299d3; border-bottom-color:transparent;}</style>
4、整体结构：<html><head>css样式及鼠标触发事件代码</head>搭建框架代码</html>
5、完成代码后保存文件：在桌面图标右击“重命名”，将文件名改为“***.html”即可用浏览器打开，查看效果
6、用css生成的动画菜单：
