最近在模仿之前公司的官网页面www.yeeuu.com，大致静态页面都模仿好了,静态页面部分基本上就是用p+css布局实现的，具体细分为header,body,footer这几块，对于header中的下拉菜单它的实现效果不是太明白，我自己当初在仿照的时候下拉菜单部分完全是用css写的，但是视觉上的效果不是太美观，所以我就去看官网上header部分的源码，发现它还加了js部分上去，当我照抄header部分的html和css时，发现自己页面上出不来下拉菜单，想请教下各位，下拉菜单的效果是如何在html+css+js效果下实现的？

官网上的源码如下(我所的可能太啰嗦，可以直接在www.yeeuu.com上查看头部的下拉菜单)：
html部分：

  
 
 轻松开门 
 
 产品展示 
 
  
  
 
 T1 
   
  
 
 S1 
   
  
 
 密码锁伴 
   
  
 
 柚控 
   
  
 
 无卡取电套装 
  
 
 
 
 行业方案 
 
  
  
 
 集团酒店方案 
   
  
 
 独立酒店方案 
  
  
 
 集中式公寓方案 
   
  
 
 分散式公寓方案 
  
 
 
 
 媒体动态 
 
 关于云柚 
 
 

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方法实现下拉菜单的方法，这个细节问题又该怎么解决？