css实现一个多级横向二级下拉菜单导航效果代码
代码语言:html
所属分类:菜单导航
代码描述:css实现一个多级横向二级下拉菜单导航效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/font-awesome-4.7.0/css/font-awesome.min.css"> <style> /* author:helang Email:helang.love@qq.com */ body{ margin: 0; padding: 0; background-color: #F3F3F3; font-size: 14px; font-family: 'Microsoft YaHei', 'Times New Roman', Times, serif; letter-spacing: 0; min-width: 1200px; color: #333333; } .hl_nav{ background-color: #FD463E; position: relative; color: #ffffff; min-width: 1200px; height: 64px; } .hl_nav a{ display: block; text-decoration: none; } .hl_nav .shade{ position: absolute; width: 100%; height: 200px; top: 64px; left: 0; z-index: 1; background-color: #EEEEEE; opacity: 0.9; filter: alpha(opacity=90); box-shadow: 0 5px 15px #CCCCCC; display: none; border-bottom: #ffffff solid 1px; border-bottom: rgba(255,255,255,0.3) solid 1px; } .hl_nav .nav_list{ position: absolute; top: 0; left: 50%; margin: 0 0 0 -600px; z-index: 2; padding: 0; list-style: none; width: 1200px; overflow: hidden; height: 64px; } .hl_nav .nav_list>li{ padding: 0; float: left; margin: 0; width: 120px; text-align: center; height: 264px; } .hl_nav .nav_head{ height: 64px; line-height: 64px; color: #ffffff; font-size: 16px; background-color: #FD463E; } .hl_nav .nav_head .icon{ font-size: 18px; } .hl_nav .item{ height: 40px; line-height: 40px; color: #333333; position: relative; } .hl_nav .item:hover:after{ content: ''; display: block; position: absolute; width: 60px; height: 2px; bottom: 5px; left: 30px; background-color: #FD463E; } .hl_nav .nav_list:hover{ height: 264px; transition: height 0.3s; } .hl_nav .nav_list:hover + .shade{ display: block; } .hl_nav .nav_list>li.highlight:hover{ background-color: #ffffff; } .hl_nav .nav_list>li:hover .nav_head,.hl_nav .nav_list>li.active .nav_head{ background-color: #EA0D04; } .hl_nav .nav_list>li.right{ float: right; } .hl_nav .nav_list>li:hover .item{ } </style> <style type="text/css"> .info_box{ margin: 100px auto 0 auto; width: 400px; background-color: #ffffff; color: #333333; padding:0 0 0 30px; } .info_box>li{ padding: 15px 0; font-size: 14px; border-top: #e5e5e5 dashed 1px; } .info_box>li:first-child{ list-style: none; font-size: 16px; color: #FD463E; border-top: none; font-weight: bold; } .info_box>li:last-child{ list-style: none; font-size: 12px; color: #999999; } </style> </head> <body> <nav class="hl_nav"> <ul class="nav_list"> <li class="highlight active"> <a class="nav_head" href="javascipt:;"> <i class="icon fa fa-home"></i> <span>网站首页</span> </a> <a href="javascipt:;" class="item">二级导航1</a> <a href="javascipt:;" class="item">二级导航2</a> <a href="javascipt:;" class="item">二级导航3</a> <a href="javascipt:;&q.........完整代码请登录后点击上方下载按钮下载查看
网友评论0