css实现下划线下拉菜单导航效果代码-html代码-BFW代码库

css实现下划线下拉菜单导航效果代码

代码语言：html

代码描述：css实现下划线下拉菜单导航效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        * {
    	box-sizing:border-box;
    }
    body {
    	font-family:"Microsoft YaHei","宋体","Segoe UI","Lucida Grande",Helvetica,Arial,sans-serif;
    	background:#374954;
    	color:white;
    	text-align:center;
    }
    #main {
    	position:relative;
    	list-style:none;
    	background:#6BBE92;
    	font-weight:400;
    	font-size:0;
    	text-transform:uppercase;
    	display:inline-block;
    	padding:0;
    	margin:50px auto;
    }
    #main li {
    	font-size:0.8rem;
    	display:inline-block;
    	position:relative;
    	padding:15px 20px;
    	cursor:pointer;
    	z-index:5;
    	min-width:120px;
    }
    li {
    	margin:0;
    }
    .drop {
    	overflow:hidden;
    	list-style:none;
    	position:absolute;
    	padding:0;
    	width:100%;
    	left:0;
    	top:48px;
    }
    .drop div {
    	-webkit-transform:translate(0,-100%);
    	-moz-transform:translate(0,-100%);
    	-ms-transform:translate(0,-100%);
    	transform:translate(0,-100%);
    	-webkit-transition:all 0.5s 0.1s;
    	-moz-transition:all 0.5s 0.1s;
    	-ms-transition:all 0.5s 0.1s;
    	transition:all 0.5s 0.1s;
    	position:relative;
    }
    .drop li {
    	display:block;
    	padding:0;
    	width:100%;
    	background:#3E8760 !important;
    }
    #marker {
    	height:6px;
    	background:#3E8760 !important;
    	position:absolute;
    	bottom:0;
    	width:120px;
    	z-index:2;
    	-webkit-transition:all 0.35s;
    	-moz-transition:all 0.35s;
    	-ms-transition:all 0.35s;
    	transition:all 0.35s;
    }
    #main li:nth-child(1):hover ul div {
    	-webkit-transform:translate(0,0);
    	-moz-transform:translate(0,0);
    	-ms-transform:translate(0,0);
    	transform:translate(0,0);
    }
    #mai.........完整代码请登录后点击上方下载按钮下载查看