纯CSS3宽屏水平导航下拉菜单代码

2020年3月22日19:38:23 评论 778

简介

纯CSS3宽屏水平导航下拉菜单代码,一款好看实用的横向网站导航下拉二级菜单,一级菜单还带有小图标,鼠标悬停则下拉显示全部二级菜单项目。

效果图

纯CSS3宽屏水平导航下拉菜单代码

代码

<!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"><meta name="author" content="helang.love@qq.com"><title>纯CSS3宽屏水平导航下拉菜单代码</title><!--图标样式--><link rel="stylesheet" type="text/css" href="http://www.ssstg.com/go/9416/"><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;}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></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:;" class="item">二级导航4</a> <a href="javascipt:;" class="item">二级导航4</a> </li> <li class="highlight"> <a class="nav_head" href="javascipt:;"> <i class="icon fa fa-cloud-download"></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> </li> <li class="highlight"> <a class="nav_head" href="javascipt:;"> <i class="icon fa fa-diamond"></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:;" class="item">二级导航4</a> <a href="javascipt:;" class="item">二级导航4</a> </li> <li class="highlight"> <a class="nav_head" href="javascipt:;"> <i class="icon fa fa-list-alt"></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> </li> <li class="highlight"> <a class="nav_head" href="javascipt:;"> <i class="icon fa fa-comments"></i> <span>与我联系</span> </a> <a href="javascipt:;" class="item">二级导航1</a> <a href="javascipt:;" class="item">二级导航2</a> </li> <li> <a class="nav_head" href="javascipt:;"> <i class="icon fa fa-user"></i> <span>关于我们</span> </a> </li> <li class="right highlight"> <a class="nav_head" href="javascipt:;"> <i class="icon fa fa-cog "></i> <span>个人中心</span> </a> <a href="javascipt:;" class="item">修改资料</a> <a href="javascipt:;" class="item">在线充值</a> <a href="javascipt:;" class="item">升级会员</a> <a href="javascipt:;" class="item">安全设置</a> <a href="javascipt:;" class="item">退出帐号</a> </li> </ul> <div class="shade"></div></nav></body></html>

在线演示

如需查看在线演示效果,请复制以上代码,前往

粘贴代码观看效果。

匿名

发表评论

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: