html导航栏悬停下拉菜单

想模仿一下vivo的官网，不知道怎么解决导航栏悬停下拉的div的位置，希望下拉div横向铺满

img

img


img

应该是给下拉区域显示的时候绝对定位，宽度给100%,适当的情况下可以按需求调整top、left、right、bottom

img

相对定位（position: absolute;）在整个header头部，然后width: 100%;

img

大概就是如下父元素相对定位，子元素绝对定位，就可以实现了


<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            .header{
                width: 100%;
                height: 100px;
                background-color: red;
                position: relative;
            }
            .header:hover .hoverElement{
                width: 100%;
                height: 100px;
                background-color: aqua;
                position: absolute;
                bottom: -100px;
            }
        </style>
    </head>
    <body>
        <div class="header">
            <div class="hoverElement"></div>>
        </div>
    </body>
</html>

img