<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <style></style> <title>CSS3下滑菜单 4</title> <style> body { background:#eee; margin:0; padding:0; font-family: "Trebuchet MS",Arial,Helvetica,sans-serif; } .example { position:relative; background:#fff url(/jscss/demoimg/201306/background.jpg); width:520px; height:382px; border:1px #000 solid; margin:20px auto; padding:15px; border-radius:3px; -moz-border-radius:3px; -webkit-border-radius:3px; } .nav,.nav ul { list-style:none; margin:0; padding:0; } .nav { position:relative; } .nav ul { height:0; left:0; overflow:hidden; position:absolute; top:46px; } .nav li { float:left; position:relative; } .nav li a { -moz-transition:0.5s; -o-transition:0.5s; -webkit-transition:0.5s; background-color:#7770B4; border:1px solid #6E67A6; color:#FFF; display:block; font-size:16px; line-height:35px; padding:5px 20px; text-decoration:none; transition:0.5s; } .nav li:hover > a { background:#8CCA33; border-color:#6E67A6; color:#fff; } .nav li:hover ul.subs { height:auto; width:180px; } .nav ul li { -moz-transition:0.5s; -o-transition:0.5s; -webkit-transition:0.5s; opacity:0; transition:0.5s; width:100%; } .nav li ul li { -moz-transition-delay:0s; -o-transition-delay:0s; -webkit-transition-delay:0s; transition-delay:0s; } .nav li:hover ul li { opacity:1; -moz-transition-delay:0.5s; -o-transition-delay:0.5s; -webkit-transition-delay:0.5s; transition-delay:0.5s; } .nav ul li a { background:#7770B4; border-color:#6E67A6; color:#fff; line-height:1px; -moz-transition:1.5s; -o-transition:1.5s; -webkit-transition:1.5s; transition:1.5s; } .nav li:hover ul li a { line-height:35px; } .nav ul li a:hover { background:#8CCA33; background-p_w_picpath: -webkit-gradient(linear, 0% 0%, 0% 95%, from(rgba(255, 255, 255, 0.5)), to(rgba(255, 255, 255, 0))); background-p_w_picpath: -moz-linear-gradient(-90deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0)); background-p_w_picpath: -o-linear-gradient(-90deg,rgba(255,255,255,0.5),rgba(255,255,25,0)); } </style> </head> <body> <div class="example"> <ul class="nav"> <li><a href="/">Home</a></li> <li><a href="/">Tutorials</a> <ul class="subs"> <li><a href="/">HTML / CSS</a></li> <li><a href="/">JS / jQuery</a></li> <li><a href="/">PHP</a></li> <li><a href="/">MySQL</a></li> <li><a href="/">XSLT</a></li> <li><a href="/">Ajax</a></li> <li><a href="/">HTML / CSS</a></li> </ul> </li> <li><a href="/">Resources</a> <ul class="subs"> <li><a href="/">PHP</a></li> <li><a href="/">MySQL</a></li> <li><a href="/">XSLT</a></li> <li><a href="/">Ajax</a></li> <li><a href="/">HTML / CSS</a></li> </ul> </li> <li><a href="/">About</a></li> <li><a href="/">Back</a></li> </ul> <div style="clear:both"></div> </div> </body> </html>
CSS3清新下滑菜单
精选 转载
提问和评论都可以,用心的回复会被更多人看到
评论
发布评论
相关文章
-
有趣的CSS - 汉堡菜单按钮
用 css 实现汉堡菜单图标与关闭图标过渡动画交互效果。
css 汉堡图标 动画 ux 交互体验 -
有趣的CSS - 按钮文字上下滑动
使用css实现按钮内两个元素上下滑动过渡的交互动画。
css html 按钮动效 ui -
看懂OSSIM的WebUI菜单源码文件
本文详细介绍OSSIM前端WebUI菜单结构和代码注释
数组 OSSIM 汉化 -
Html5,css3菜单
实现的难点在于:first-child,last-child 两个选择器,以后margin-left:-1px;的应
html xml 选择器 ide css3 -
菜单 CSS3自定义图标悬浮菜单
CSS3自定义图标悬浮菜单是一款基于HTML5+CSS3实现的可自定义小图标悬浮菜单。查看原文查看在线演示Demo和更多原文内容教程:http://ibloger.net/article/1200.html
css3自定义悬浮 css3图标悬浮菜单 图标悬浮菜单 css3菜单 自定义 -
CSS3过渡效果(CSS3)
CSS3过渡效果(CSS3)<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8">\
css css3 html5 html 过渡效果 -
css3 实现鼠标移入文字下滑动画效果
css html 如果是从下往上
css html -
CSS3小图标菜单导航
在线演示 本地下载
小图标菜单导航 CSS