纯CSS3编写的红色下拉导航菜单js特效代码

下载地址

一款纯css3 transition属性制作红色的导航菜单，鼠标悬停展开下拉菜单，支持三级下拉菜单代码。@charset "utf-8";/*导航栏*/.nav_menu3,.nav_menu3 ul,.nav_menu3 ul li,.nav_menu3 ul li a,.nav_menu3 #menu-button { margin: 0; padding: 0; border: 0; list-style: none; line-height: 1; display: block; position: relative; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}.nav_menu3 #menu-button { margin-top: 100px; background: #F00; position: absolute; z-index: 99999;}.nav_menu3:after,.nav_menu3 > ul:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0;}.nav_menu3 #menu-button { display: none;}.nav_menu3 { width: auto; line-height: 1; background: #ffffff; background: #990B2C;}#menu-line { position: absolute; top: 0; left: 0; height: 3px; background: #990B2C; -webkit-transition: all 0.25s ease-out; -moz-transition: all 0.25s ease-out; -ms-transition: all 0.25s ease-out; -o-transition: all 0.25s ease-out; transition: all 0.25s ease-out;}.nav_menu3 > ul > li { float: left;}.nav_menu3.align-center > ul { font-size: 0; text-align: center;}.nav_menu3.align-center > ul > li { display: inline-block; float: none;}.nav_menu3.align-center ul ul { text-align: left;}.nav_menu3.align-right > ul > li { float: right;}.nav_menu3.align-right ul ul { text-align: right;}.nav_menu3 > ul > li > a { padding: 30px 10px 29px 10px; text-decoration: none; text-transform: uppercase; color: #eee; -webkit-transition: color .2s ease; -moz-transition: color .2s ease; -ms-transition: color .2s ease; -o-transition: color .2s ease; transition: color .2s ease; border-right:1px solid #990B2C;}.nav_menu3 > ul > li:hover > a { color: #990B2C; background: #FFF;}.nav_menu3 > ul > li.nav-has-sub > a { padding-right: 25px;}.nav_menu3 > ul > li.nav-has-sub > a::after { position: absolute; top: 35px; right: 10px; width: 4px; height: 4px; border-bottom: 1px solid #990B2C; border-right: 1px solid #990B2C; content: ""; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); -webkit-transition: border-color 0.2s ease; -moz-transition: border-color 0.2s ease; -ms-transition: border-color 0.2s ease; -o-transition: border-color 0.2s ease; transition: border-color 0.2s ease;}.nav_menu3 > ul > li.nav-has-sub:hover > a::after { border-color: #990B2C;}.nav_menu3 ul ul { position: absolute; left: -9999px;}.nav_menu3 > ul > li > ul { border-top: 1px solid #FFF;}.nav_menu3 li:hover > ul { left: auto;}.nav_menu3.align-right li:hover > ul { right: 0;}.nav_menu3 ul ul ul { margin-left: 100%; top: 0;}.nav_menu3.align-right ul ul ul { margin-left: 0; margin-right: 100%;}.nav_menu3 ul ul li { height: 0; -webkit-transition: height .2s ease; -moz-transition: height .2s ease; -ms-transition: height .2s ease; -o-transition: height .2s ease; transition: height .2s ease;}.nav_menu3 ul li:hover > ul > li { height: 52px;}.nav_menu3 ul ul li a { padding: 20px 20px; width: 140px; background: #990B2C; text-decoration: none; color: #eeeeee; -webkit-transition: color .2s ease; -moz-transition: color .2s ease; -ms-transition: color .2s ease; -o-transition: color .2s ease; transition: color .2s ease; border-top: 1px solid #990B2C;}.nav_menu3 ul ul li:hover > a,.nav_menu3 ul ul li a:hover { color: #990B2C; background: #FFF; border-top: 1px solid #FFF;}.nav_menu3 ul ul li.nav-has-sub > a::after { position: absolute; top: 25px; right: 10px; width: 4px; height: 4px; border-bottom: 1px solid #eee; border-right: 1px solid #eee; content: ""; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); -webkit-transition: border-color 0.2s ease; -moz-transition: border-color 0.2s ease; -ms-transition: border-color 0.2s ease; -o-transition: border-color 0.2s ease; transition: border-color 0.2s ease;}.nav_menu3.align-right ul ul li.nav-has-sub > a::after { right: auto; left: 10px; border-bottom: 0; border-right: 0; border-top: 1px solid #dddddd; border-left: 1px solid #dddddd;}.nav_menu3 ul ul li.nav-has-sub:hover > a::after { border-color: #990B2C;}

dd:

纯CSS3编写的红色下拉导航菜单js特效代码相关推荐

城市地区级联二级下拉选择菜单js特效
城市地区级联二级下拉选择菜单js特效:城市级联选择,js地区选择.js特效 <script type="text/javascript">var pc = new Ar ...
Java制作二级导航菜单_纯CSS实现超简单的二级下拉导航菜单代码
本文实例讲述了纯CSS实现超简单的二级下拉导航菜单代码.分享给大家供大家参考.具体如下: 这是一款纯CSS菜单,二级下拉导航效果,是最简洁的CSS导航菜单,兼容性也很棒,IE7/8.火狐等都支持,而且 ...
html京东下拉菜单设置,div css下拉导航菜单（图+演示）
div css下拉导航菜单(图+演示),div css下拉导航菜单,css导航菜单下拉 CSS导航菜单(CSS下拉菜单演示图) 查看演示-CSS下拉菜单样式:下拉导航菜单/ 以下有DIV CSS下拉菜 ...
在 jQuery 中使用滑入滑出动画效果，实现二级下拉导航菜单的显示与隐藏效果
查看本章节查看作业目录需求说明: 在 jQuery 中使用滑入滑出动画效果,实现二级下拉导航菜单的显示与隐藏效果用户将光标移动到"最新动态页"或"帮助查询" ...
jQuery二级下拉导航菜单插件适用手机端
下载地址一款非常时尚的jQuery和css3二级下拉导航菜单插件.该导航菜单插件中带有二级子菜单,也可以以图文方式展示或图标加文字方式组合展示,非常灵活方便.HTML结构html结构使用一个嵌套的无 ...
一款jQuery立体感动态下拉导航菜单特效
一款jQuery立体感动态下拉导航菜单特效,鼠标经过,在菜单栏上方下拉出一个背景图片,效果十分不错的一款jquery特效. 对IE6都是兼容的,希望大家好好研究研究. 适用浏览器:IE6.IE7.IE ...
php导航栏代码子菜单找不到,php – 下拉导航菜单,显示每个类别的最新帖子
所以我想在我的wordpress网站的导航菜单上工作.我正在尝试从hongkiat.com复制导航菜单(如图所示). 在Hongkiat的导航菜单中,您会看到五(5)个家长类别(设计/开发,技术,灵感 ...
HTML下拉菜单怎么做成横向,纯css实现横向下拉导航菜单(可做左侧类目导航)
[实例简介] [实例截图] [核心代码] 无标题文档 *{ margin:0; padding:0;}/*通用选择器样式*/ body{ font-family:"微软雅黑";}/ ...
js读取div从html中导入,在html中div+css布局的简单应用...-js+div+css下拉导航菜单完整代...-CSS文件的条件导入 - Gene Li_169IT.COM...
方案一: 在HTML文档中使用条件导入,如在HEAD中插入如下代码: 1: 4: .csharpcode, .csharpcode pre{font-size: small;color: black; ...

纯CSS3编写的红色下拉导航菜单js特效代码

纯CSS3编写的红色下拉导航菜单js特效代码相关推荐

最新文章

热门文章