一款纯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;}
未经允许不得转载： ICode联盟 » 插件特效 » 纯CSS3编写的红色下拉导航菜单特效代码