javascript - 请教下一个CSS下拉菜单实现效果
最近在模仿之前公司的官网页面www.yeeuu.com，大致静态页面都模仿好了,静态页面部分基本上就是用p+css布局实现的，具体细分为header,body,footer这几块，对于header中的下拉菜单它的实现效果不是太明白，我自己当初在仿照的时候下拉菜单部分完全是用css写的，但是视觉上的效果不是太美观，所以我就去看官网上header部分的源码，发现它还加了js部分上去，当我照抄header部分的html和css时，发现自己页面上出不来下拉菜单，想请教下各位，下拉菜单的效果是如何在html+css+js效果下实现的？
官网上的源码如下(我所的可能太啰嗦，可以直接在www.yeeuu.com上查看头部的下拉菜单)：
html部分：
<header>
<p class="content">
<img class="logo" src="../img/indexOne/logo.png">
<ul class="nav-menu">
<p class="nav-item-wrapper">
<a class="nav-item active " href="">轻松开门</a>
</p>
<p class="nav-item-wrapper">
<a class="nav-item " href="">产品展示</a>
<p class="subheader">
<p class="subheader-content">
<a class="item" href="">
<p class="img-wrapper">
<img src="../img/indexOne/t1.jpg">
</p>
<p>
T1
</p>
</a>
<a class="item" href="">
<p class="img-wrapper">
<img src="../img/indexOne/s1.jpg">
</p>
<p>
S1
</p>
</a>
<a class="item" href="">
<p class="img-wrapper">
<img src="../img/indexOne/sb.jpg">
</p>
<p>
密码锁伴
</p>
</a>
<a class="item" href="">
<p class="img-wrapper">
<img src="../img/indexOne/hz.jpg">
</p>
<p>
柚控
</p>
</a>
<a class="item" href="">
<p class="img-wrapper">
<img src="../img/indexOne/qd.jpg">
</p>
<p>
无卡取电套装
</p>
</a>
</p>
</p>
</p>
<p class="nav-item-wrapper">
<a class="nav-item " href="">行业方案</a>
<p class="subheader" id="projectSubheader">
<p class="subheader-content">
<a class="item" href="">
<p class="img-wrapper">
<img src="../img/indexOne/groupHotel.png">
</p>
<p>
集团酒店方案
</p>
</a>
<a class="item" href="">
<p class="img-wrapper">
<img src="../img/indexOne/aloneHotel.png">
</p>
<p>
独立酒店方案
</p>
</a
<a class="item" href="">
<p class="img-wrapper">
<img src="../img/indexOne/centralizedApartment.png">
</p>
<p>
集中式公寓方案
</p>
</a>
<a class="item" href="">
<p class="img-wrapper">
<img src="../img/indexOne/decentralizedApartment.png">
</p>
<p>
分散式公寓方案
</p>
</a>
</p>
</p>
</p>
<p class="nav-item-wrapper">
<a class="nav-item " href="">媒体动态</a>
</p>
<p class="nav-item-wrapper">
<a class="nav-item " href="">关于云柚</a>
</p>
</ul>
</p></header>
CSS部分代码如下：
header {
background-color: rgba(17, 17, 17, 0.9);
height: 60px;
position: relative;}
header .content {
width: 1106px;
margin: 0 auto;
height: 100%;}
header .content .logo {
position: absolute;
top: 50%;
transform: translateY(-50%);
cursor: pointer;}
header .content .nav-menu {
float: right;
display: inline-block;
height: 100%;}
header .content .nav-menu .nav-item-wrapper {
display: inline-block;
height: 100%;
line-height: 60px;
margin-left: 56px;
text-align: right;}
header .content .nav-menu .nav-item {
display: block;
color: #bebebe;
font-size: 14px;
cursor: pointer;
text-decoration: none;}
a {
background-color: transparent;}
header .subheader {
position: absolute;
top: 60px;
left: 0;
background-color: #fff;
width: 100%;
height: 0;
z-index: 15;
-webkit-transition: height 0.3s;
transition: height 0.3s;
overflow: hidden;
box-shadow: 0px 3px 4px rgba(0, 0, 0, 0.18);}
header .subheader .subheader-content {
width: 1106px;
margin: 0 auto;
text-align: center;
line-height: 1;
padding: 20px 0;
height: 100%;
position: relative;}
header .subheader .subheader-content .item {
float: left;
height: auto;
top: 50%;
transform: translateY(-50%);
width: 20%;
text-align: center;
color: gray;
display: inline-block;
cursor: pointer;
text-decoration: none;
outline: none;
font-size: 14px;
position: relative;}
header .subheader .subheader-content .item:before {
position: absolute;
right: 1px;
top: 20px;
width: 1px;
height: 140px;
border-right: solid 1px #e8e8e8;
content: "";}
header .subheader .subheader-content .item .img-wrapper {
width: 100%;
min-height: 145px;}
header .content .nav-menu .nav-item.active {
color: #e60044;}
现在的问题就是想用它的方法来实现，copy了它的html+css实现不了下拉菜单，F12看它的源码有用id选择器,估计是用js来选择元素，从而实现调用，哪位可以跟我详细讲下它这下拉菜单实现的原理.
PS:这是我自己下午做的下拉菜单
宽度我已经设置为和header部分的最大宽度1106px了，但是还是不能像官网界面那样下拉菜单能填充整个界面，官网界面如下：
我还试过用相对宽度100vw的方法，还是不管用，假如用自己这种纯css方法实现下拉菜单的方法，这个细节问题又该怎么解决？
