不能在父列表项正下方居中辅助列表项

如何解决不能在父列表项正下方居中辅助列表项

我试图制作一个导航栏，当你将鼠标悬停在它的一个项目上时，它会下拉并显示另一组列表项目我知道如何制作下拉效果，但我无法将二级列表项目完全居中在父列表上方项目

.container{
    width: 90%;
    margin: 0 auto;
}


header{
    background: black;
    height: 100px;
}


.container > ul {
    height: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.container >ul li{
    margin: 7px;
    position: relative;
    border: 1px solid green;
}

.container >ul li,.container > ul li a{
    list-style: none;
    text-decoration: none;
    padding: 4px;    
    
}

.container ul ul{
    position: absolute;

}

 <header>
            <div class="container">
                <ul>
                    <li><a href="">Home</a>
                        <ul>
                            <li><a href="">Home</a></li>
                            <li><a href="">Home</a></li>
                            <li><a href="">Home</a></li>
                        </ul>
                    </li>
                    <li><a href="">Home</a></li>
                    <li><a href="">Home</a></li>
                    <li><a href="">Home</a></li>
                </ul>
            </div>
        </header>