bootstrap4 nav 菜单

@charset "UTF-8";

/****************** 公共通用样式 begin******************/

body{
color:#000;
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;

}
a:hover{
text-decoration:none;
}
ul,ol{
list-style:none;
}
/**设置字体**/
@font-face{
font-family:lk;
src:url('../fonts/lk.eot') format('embedded-opentype'),
url('../fonts/lk.svg') format('svg'),
url('../fonts/lk.ttf') format('truetype'),
url('../fonts/lk.woff') format('woff');
}
[class="icon-"],[class*=" icon-"]{
font-family:lk;
font-style:normal;
}
/****************** 公共通用样式样式end******************/

/****************** 页头 样式 begin******************/

#kq_header .navbar-kq{
/* border-bottom:1px solid #e0e0e0; */
}
/**设置logo**/
#kq_header .navbar-kq .navbar-brand{
200px;
height:90px;

}
/**设置菜单样式 写法（navbar-nav>li>a） **/
#kq_header .navbar-kq .navbar-nav>li>a{
height:90px;
/* background-color: orange; */
/**居中显示**/
display: flex;
justify-content:center;
align-items:center;
margin-right: 10px;
}
#kq_header .navbar-kq .navbar-nav>li>a:hover{
color:#007bff;
border-bottom:2px solid #007bff;
}
/**设置 小图高度**/
#kq_header .navbar-kq .navbar-toggler{

}

/****************** 页头 样式end******************/

/****************** 表单 样式 begin******************/
#kq_header{
background-color: orange;
}
/****************** 表单 样式end******************/

/****************** 表单 样式 begin******************/
#kq_list{
/* background-color: green; */
}
/****************** 表单 样式end******************/

/****************** 页底 样式 begin******************/
#kq_footer{
100%;
height: 80px;
}
#kq_footer .container .row{
height: 80px;
line-height: 80px;
}
/****************** 页底 样式end******************/

HTML

<section id="kq_header" class="bg-light">
<div class="container">

<nav class="navbar navbar-expand-lg navbar-light bg-light navbar-kq">
<a class="navbar-brand d-flex justify-content-center align-items-center" href="#"><strong>
<h2>
<!-- image url -->
补打卡申请单
</h2>
</strong></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#kq_nav" aria-controls="kq_nav"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>

<div class="collapse navbar-collapse" id="kq_nav">
<ul class="navbar-nav mr-auto">
<li class="nav-item active"><a class="nav-link" href="#">补打卡申请单 <span class="sr-only">(current)</span></a></li>
<li class="nav-item"><a class="nav-link" href="#">加班申请单</a></li>
<li class="nav-item dropdown"><a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false"> 岗位异动单 </a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">岗位异动单</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">岗位异动单</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">岗位异动单</a></div></li>
<li class="nav-item"><a class="nav-link " href="#">请假申请单</a></li>
</ul>

</div>
</nav>


</div>
</section>