javascript - 请教下一个CSS下拉菜单实现效果

Question

最近在模仿之前公司的官网页面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方法实现下拉菜单的方法，这个细节问题又该怎么解决？

Answer 1

看了下.subheader的样式其中有 heigth: 0;transition: height 0.3s;所以应该是改.subheader height的方式来实现的

至于width问题，首先header的position为relative,.subheader是绝对定位且是以header为定位上下文，.subheader的width为100%，所以.subheader和header的width是一样的。

Answer 2

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 .nav-item-wrapper:hover .subheader {
height: 240px; /* 具体 高度 我 也 不知道 是 多少 乱 填滴 既然 她 有  写 CSS3 的 过渡 效果 那效果 就是 过渡 效果 了 这个 好像 她 是 写在 JS 那里 了吧（我 也 不知道 猜的）
也就是 鼠标 悬停 在 类 nav-item-wrapper p元素 上 子元素 类 subheader 从 高度 0 到 240px 的 过渡 鼠标 移开 就 高度 变 0 的 过渡
*/
-webkit-transition: height 0.6s;
transition: height 0.6s;
}