css实现水平整排下拉菜单导航栏效果代码-html代码-BFW代码库

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 type="text/css">
        /*    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 {
    	}
            .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;
    }
    i{
        margin-right: 8px;
    }
    </style>
</head>

<body>
    <nav class="hl_nav">
        <ul class="nav_list">
            <li class="highlight active"><a class="nav_head" href="ja.........完整代码请登录后点击上方下载按钮下载查看