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的flexbox实现水平垂直居中与三列等高布局)
- css3中过渡动画的属性(css3 中实现炫酷的loading效果)
- css3支持多重背景吗(真正了解CSS3背景下的@font face规则)
- css3动画让元素绕着圆圈转动(css3动画过渡实现鼠标跟随导航效果)
- div和css怎么铺背景(css3实现一个div设置多张背景图片及background-image属性实例演示)
- css3行内样式表图解(详解css3自定义滚动条样式写法)
- html5css3旋转特效效果(一款利用html5和css3实现的3D立方体旋转效果教程)
- css3中基本选择符(CSS3 clip-path 用法介绍详解)
- CSS3中user-select的用法
- css3颜色详解(CSS3混合模式mix-blend-mode/background-blend-mode简介)
- css 图片边缘虚化(CSS3对图片照片进行边缘模糊处理的实现)
- css3边框阴影的属性(css3 border-radius属性详解)
- css3水平移动效果(利用css3 translate完美实现表头固定效果)
- jq控制css样式(css3模拟jq点击事件的实例代码)
- 微信小程序图片加特效(微信小程序实现可实时改变转速的css3旋转动画实例代码)
- css3过渡技巧视频(css3过渡_动力节点Java学院整理)
- 菲律宾安全吗(菲律宾安全吗2023)
- 彩礼重要吗()
- 写信告诉我今天海是什么颜色(写信告诉我今天海是什么颜色回答)
- 英语难学吗(法语比英语难学吗)
- 今天要吃什么(今天要吃什么菜好)
- 网红直播可以赚很多钱吗(网红直播可以赚很多钱吗)
热门推荐
- mysql字符串截取字段(MySQL如何从不固定位置提取字符串元素详解)
- css中三角标(使用css实现三角符号效果)
- css垂直左右居中的方式(css常用元素水平垂直居中方案)
- dedecms标题在哪改(织梦DEDECMS文章拼音命名规则时去掉id的方法)
- php怎么设置统计代码(php简单计算权重的方法示例适合抽奖类应用)
- python真的能高效处理excel报表吗(Python数据报表之Excel操作模块用法分析)
- dedecms标签解析(Dedecms网站给图片alt属性自动调用标题的方法)
- tomcat是异步非阻塞吗(浅谈Tomcat如何打破双亲委托机制)
- python操作pandas(详解Python学习之安装pandas)
- iis警告事件怎么处理(IIS服务器常见错误解析及排错指南、错误代码大全)