css3特效旋转菜单(CSS3实现的水平标题菜单)
类别:Web前端 浏览量:2629
时间:2021-11-05 14:18:45 css3特效旋转菜单
CSS3实现的水平标题菜单实现效果: 实现代码html
<nav class="dropdownmenu"> <ul> <li><a href="http://www.jochaho.com/wordpress/">开心学习网</a></li> <li><a href="http://www.jochaho.com/wordpress/about-pritesh-badge/">jb51</a></li> <li><a href="#">Articles on HTML5 & CSS3</a> <ul id="submenu"> <li><a href="http://www.jochaho.com/wordpress/difference-between-svg-vs-canvas/">Difference between SVG vs. Canvas</a></li> <li><a href="http://www.jochaho.com/wordpress/new-features-in-html5/">New features in HTML5</a></li> <li><a href="http://www.jochaho.com/wordpress/creating-links-to-sections-within-a-webpage/">Creating links to sections within a webpage</a></li> </ul> </li> <li><a href="http://www.jochaho.com/wordpress/category/news/">News</a></li> <li><a href="http://www.jochaho.com/wordpress/about-pritesh-badge/">Contact Us</a></li> </ul> </nav>
CSS3
.dropdownmenu ul, .dropdownmenu li { margin: 0; padding: 0; } .dropdownmenu ul { background: gray; list-style: none; width: 100%; } .dropdownmenu li { float: left; position: relative; width:auto; } .dropdownmenu a { background: #30A6E6; color: #FFFFFF; display: block; font: bold 12px/20px sans-serif; padding: 10px 25px; text-align: center; text-decoration: none; -webkit-transition: all .25s ease; -moz-transition: all .25s ease; -ms-transition: all .25s ease; -o-transition: all .25s ease; transition: all .25s ease; } .dropdownmenu li:hover a { background: #000000; } #submenu { left: 0; opacity: 0; position: absolute; top: 35px; visibility: hidden; z-index: 1; } li:hover ul#submenu { opacity: 1; top: 40px; /* adjust this as per top nav padding top & bottom comes */ visibility: visible; } #submenu li { float: none; width: 100%; } #submenu a:hover { background: #DF4B05; } #submenu a { background-color:#000000; }
以上就是CSS3实现的水平标题菜单的详细内容,更多关于CSS3 标题菜单的资料请关注开心学习网其它相关文章!
您可能感兴趣
- css3伸缩布局教学(css3 利用transform-origin 实现圆点分布在大圆上布局及旋转特效)
- css3引导动画教程(详解Css3新特性应用之过渡与动画)
- css3设置过渡效果(CSS3 media queries + jQuery实现响应式导航)
- JavaScript css3实现简单视频弹幕功能(JavaScript css3实现简单视频弹幕功能)
- css3中一些常用的特效果(CSS3 制作的书本翻页特效)
- css3渐变放大功能(CSS3 渐变Gradients之CSS3 线性渐变)
- 制作css3动画应使用哪个样式属性(CSS3中Transform动画属性用法详解)
- css3实用指南(css3截图_动力节点Java学院整理)
- css3动画效果图(css3实现波纹特效、H5实现动态波浪效果)
- css3画出苹果手机(基于CSS3画一个iPhone)
- css3动画实现loading(CSS3实现粒子旋转伸缩加载动画)
- css3旋转动画教学(css3动画效果抖动解决方法)
- css3渐变背景教程(css3实现背景图片颜色修改的多种方式)
- css3loading教程(详解纯CSS3制作的20种loading动效)
- css3菜单特效(CSS3实现精美横向滚动菜单按钮)
- css3边框阴影的属性(css3 border-radius属性详解)
- 大事件 合肥四中火了(大事件合肥四中火了)
- 翼龙贷组织出借人调研 感受鄱阳 借 来的致富路(翼龙贷组织出借人调研)
- 2023新国风戏曲教育寒假集训班汇报演出《戏娃闹元宵》图文报道(2023新国风戏曲教育寒假集训班汇报演出戏娃闹元宵图文报道)
- 九儿《狐踪谍影》出演热血女特警,戏份杀青受关注(九儿狐踪谍影出演热血女特警)
- 红色代表什么(红色代表什么寓意)
- 蓝天代表什么(蓝天代表什么生肖)
热门推荐
- dedecms点击量(dedecms生成速度超级优化攻略 从50秒20页到0.72秒20页)
- php连接mysql需要数据源吗(php连接mysql数据库最简单的实现方法)
- docker怎么设置远程访问(Docker开启远程访问的实现方式)
- docker如何加volume(Dockerfile 中 VOLUME 与 docker -v 的区别说明)
- python3.8爬虫需要的包(python爬取基于m3u8协议的ts文件并合并)
- web渗透网络基础(响应式Web之流式网格系统)
- sql中row的用法(sql server数据库中raiserror函数用法的详细介绍)
- python字典的key(Python使用dict.fromkeys快速生成一个字典示例)
- linux如何使用gdb调试(Linux下如何使用gdb调试core文件)
- python开发的独立商城(python实现电子产品商店)