Header容器元素布局错乱与悬浮下拉菜单按钮定位问题求助

我正在制作hover触发的悬浮下拉菜单，但按钮定位出现异常；同时header_container容器内元素分布错乱，部分元素处于top:0%、left:0%位置，另一部分却在top:50%、left:50%左右。我需要所有元素初始位置为top:0%、left:0%，方便在header容器内精准调整布局，目标效果参考赛博朋克官网的头部布局。

相关CSS代码 #

.main_body_container{
    width:100%;
    height:2000px;
    background-size:cover;
    position:relative;
    overflow: hidden;
    margin:0;
    box-sizing:border-box;
}

.background{
    width:100%;
    height:1080px;
    background:url("../images/background.jpg");
    background-size:cover;
    position:fixed;
    overflow:hidden;
    margin:0;
    box-sizing:border-box;
}

.header_container{
    width:100%;
    height:20%;
    position:fixed;
    display:flex;
    align-items:start;
    background: linear-gradient(to bottom,rgb(104, 15, 107),rgba(0, 0, 0, 0));
    opacity:1;
    top:0px;
    left:0px;
    overflow:hidden;
    margin:0;
    box-sizing:border-box;
}

.header_icon{
    width:77px;
    height:90px;
    background: url("../images/samurai.png");
    background-size:contain;
    position:relative;
    top:10%;
    left:5%
}

.header_txt_frame{
    width:200px;
    height:100px;
    position:relative;
    top:30%;
    left:6%;
    box-sizing:border-box;
}

@font-face {
    font-family: 'Cyberpunk';
    src: url("../font/Cyberpunk.otf") format('opentype'),url("../font/Cyberpunk.ttf") format('truetype');

}
@font-face{
    font-family:'Blender';
    src:url("../font/Blender-Pro-Book.otf") format('opentype')
}
.header_text{
    color:#fcee0a;
    position:relative;
    display:inline-block;
    text-transform: uppercase;
    animation: glitch-animation 2s infinite;
    font-family:'Cyberpunk',sans-serif;
    font-size:40px;
}

.glitch::before,
.glitch::after {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
}

.glitch::before {
    animation: glitch-animation-before 3s infinite;
}

.glitch::after {
    animation: glitch-animation-after 2s infinite;
}

@keyframes glitch-animation {
    0% {
        transform: translate(0);
    }
    20% {
        transform: translate(-2px, -2px);
    }
    40% {
        transform: translate(2px, 2px);
    }
    60% {
        transform: translate(-2px, 2px);
    }
    80% {
        transform: translate(2px, -2px);
    }
    100% {
        transform: translate(0);
    }
}

@keyframes glitch-animation-before {
    0%, 100% {
        clip: rect(5px, 999px, 28px, 0);
        transform: skew(0deg);
    }
    20% {
        clip: rect(14px, 999px, 5px, 0);
        transform: skew(3deg);
    }
    40% {
        clip: rect(8px, 999px, 6px, 0);
        transform: skew(-3deg);
    }
    60% {
        clip: rect(15px, 999px, 28px, 0);
        transform: skew(0deg);
    }
    80% {
        clip: rect(18px, 999px, 8px, 0);
        transform: skew(3deg);
    }
}

@keyframes glitch-animation-after {
    0%, 100% {
        clip: rect(13px, 999px, 28px, 0);
        transform: skew(0deg);
    }
    20% {
        clip: rect(18px, 999px, 8px, 0);
        transform: skew(-3deg);
    }
    40% {
        clip: rect(5px, 999px, 28px, 0);
        transform: skew(0deg);
    }
    60% {
        clip: rect(14px, 999px, 5px, 0);
        transform: skew(3deg);
    }
    80% {
        clip: rect(8px, 999px, 6px, 0);
        transform: skew(-3deg);
    }
}

.body_text_container{
    width: 100%;
    height:1400px;
    position:relative;
    background-color: rgb(0, 0, 0);
    opacity:.7;
    top: 0%;
    left:0%;
}

.header_menu_container{
    width:40%;
    height:100%;
    position:relative;
    left:40%;
    box-sizing: border-box;
    align-items: center;
    display:flex;
}

.menu_list{
    align-items:center;
    background: rgba(0,0,0,0.6);
    border:1px solid #fcee0a;
    display:flex;
    height:48px;
    width:100%;
    top:50%;
    margin:0;
}

.menu_item{
    align-items:center;
    color:#fff;
    font-family: 'Blender',sans-serif;
    font-size:22px;
    cursor:pointer;
    display:flex;
    width:25%;
    height:100%;
}

.menu-sub-list{
    width:100%;
    height:100px;
    backdrop-filter: blur(8px);
    background:rgba(150, 118, 118, 0.6);
    position:relative;
    left:0;
    top:0%;
    display:none;
}

.menu_item:hover .menu-sub-list{display:block;}
.menu_item:hover{background-color:#fcee0a; color:black;}

相关HTML代码 #

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="icon" href="./images/fav.jpg">
    <link href="./css/index_main.css" rel="stylesheet"/>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Coffe</title>
</head>
<body style="margin:0">
    <div class="main_body_container">
        <div class="background"></div>
        <div class="body_text_container"></div>
        <div class="header_container">
            <div class="header_icon"></div>
            <div class="header_txt_frame">
                <span class="header_text">Humanisick</span>
            </div>
            <div class="header_menu_container">
                <div class="dropdown">
                    <button class="dropbtn">Dropdown</button>
                    <div class="dropdown-content">
                      <a href="#">Link 1</a>
                      <a href="#">Link 2</a>
                      <a href="#">Link 3</a>
                    </div>
                </div>
            </div>      
        </div>

    </div>
</body>
</html>

补充样式信息 #

布局正常的元素样式 #

.header_icon{
    width:77px;
    height:90px;
    background: url("../images/samurai.png");
    background-size:contain;
    position:relative;
    top:10%;
    left:5%
}

.header_txt_frame{
    width:200px;
    height:100px;
    position:relative;
    top:30%;
    left:6%;
    box-sizing:border-box;
}

布局异常的元素样式 #

.dropdown{
    position:relative;
    display:inline-block;
    top:0%;
    left:0;
}

内容的提问来源于stack exchange，提问作者Sebastian Barragan