HTML
<div class="header"> <div class="nav"> <div class="nav_left"> <ul class="nav_btn"> <li> <a href="./company.html" class="nav_a"> <p>集团介绍</p> <span>Introduction</span> </a> <ul class="sub_menu"> <li> <a href="./company.html">公司简介</a> </li> <li> <a href="./company.html">公司文化</a> </li> <li> <a href="./company.html">管理团队</a> </li> <li> <a href="./company.html">专家团队</a> </li> </ul> </li> <li> <a href="./pro.html" class="nav_a"> <p>产品目录</p> <span>Products</span> </a> <ul class="sub_menu pro_nav_list"> <li> <a href="./pro.html">肿瘤个体化用药指导</a> </li> <li> <a href="./pro.html">遗传病诊断和筛查</a> </li> <li> <a href="./pro.html">药物基因组检测</a> </li> <li> <a href="./pro.html">科研服务</a> </li> <li> <a href="./pro.html">其他检测</a> </li> </ul> </li> <li> <a href="./scientific.html" class="nav_a"> <p>科研中心</p> <span>Research Center</span> </a> <ul class="sub_menu"> <li> <a href="./scientific.html">科研中心</a> </li> <li> <a href="./scientific.html">其他</a> </li> </ul> </li> <li> <a href="./new.html" class="nav_a"> <p>新闻中心</p> <span>News</span> </a> </li> <li> <a href="./contact.html" class="nav_a"> <p>联系我们</p> <span>Contact Us</span> </a> <ul class="sub_menu"> <li> <a href="./contact.html">招聘</a> </li> <li> <a href="./contact.html">患者招募</a> </li> <li> <a href="./contact.html">客服咨询</a> </li> <li> <a href="./contact.html">在线留言</a> </li> </ul> </li> </ul> <ul class="nav_right"> <li> <a href="#"> 检测进度查询 </a> </li> </ul> </div> </div> </div>复制代码CSS
<style> * { padding: 0; margin: 0; font-family: "PingFang SC", "Lantinghei SC", "Microsoft YaHei", "HanHei SC", "Helvetica Neue", "Open Sans", Arial, "Hiragino Sans GB", 微软雅黑, STHeiti, "WenQuanYi Micro Hei", SimSun, sans-serif; } ul, ol { list-style: none; } a { text-decoration: none; color: #fff; } .header { width: 100%; background-color: #16264b; height: 80px; line-height: 80px; display: flex; justify-content: space-between; padding: 0 50px; position: fixed; z-index: 999; box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.26); } .top_logo a { height: 100%; line-height: 100%; width: 158px; display: flex; justify-content: flex-start; align-items: center; } .top_logo img { width: 100%; } .nav { display: flex; justify-content: flex-end; } .nav a { font-size: 14px; } .nav_left { height: 100%; display: flex; /* justify-content: end; */ } .nav_btn { height: 100%; line-height: 100%; display: flex; } .nav_btn li { font-size: 14px; height: 100%; line-height: 100%; display: flex; justify-content: center; align-items: center; transition: 0.4s; width: 140px; } .nav_btn a { text-align: center; } .nav_btn a p { padding-bottom: 5px; } .nav_right { /* padding-left: 3%; */ margin-left: 15px; } .nav_right a { border: 1px solid #fff; padding: 6px 15px; border-radius: 4px; } .nav_btn li a { transition: 0.4s; } .nav_btn li:hover .nav_a, .nav_btn li:active .nav_a, .nav_btn li:visited .nav_a, .nav_btn li:link .nav_a { font-size: 18px !important; } .nav_btn li:hover .nav_a p, .nav_btn li:active .nav_a p, .nav_btn li:visited .nav_a p, .nav_btn li:link .nav_a p { font-weight: bold; } .active { font-size: 18px !important; } .active p { font-weight: bold; } /* nav 下拉 */ .nav_btn li { position: relative; } .sub_menu { font-size: 14px !important; background: #ffffff none repeat scroll 0 0; -webkit-box-shadow: 0 3px 9.3px 0.7px rgba(0, 0, 0, 0.15); box-shadow: 0 3px 9.3px 0.7px rgba(0, 0, 0, 0.15); opacity: 0; position: absolute; top: 100%; left: 0px; -webkit-transform: scaleY(0); transform: scaleY(0); -webkit-transform-origin: 0 0 0; transform-origin: 0 0 0; -webkit-transition: all 500ms linear 0s; transition: all 500ms linear 0s; visibility: hidden; z-index: 99; } .sub_menu li { font-size: 14px !important; } .sub_menu li a { color: #363f4d; display: block; font-size: 14px !important; font-weight: 400; line-height: 35px; padding: 0 20px; text-transform: capitalize; } .sub_menu a:hover { color: #1a47b0; padding-left: 30px; } .sub_menu { display: block; } .nav_btn li:hover ul.sub_menu { opacity: 1; -webkit-transform: scaleY(1); transform: scaleY(1); visibility: visible; } .pro_nav_list li { width: 200px; } .pro_nav_list { left: -30px !important; } </style>复制代码絵