How to make NavBar hover dropdown effect work in html and css

I've been trying to create a navigation bar with Dropdowns appearing while hovering over the buttons but I can't figure out how to achieve it because soon as I hover over the button, the dropdown associated to that button appears and then disappears as I reach out to click one of the links in it. Here's a code snippet

 <div class="container">
        <div class="sub-one">
            <div class="home">
                <ul>
                    <li>
                        <button>Home</button>
                        <ul>
                            <li>
                                <a href="">sub-1</a>
                            </li>
                            <li>
                                <a href="">sub-2</a>
                            </li>
                            <li>
                                <a href="">sub-3</a>
                            </li>
                        </ul>
                    </li>
                </ul>
            </div>
            <div class="about-us">
                <ul>
                    <li>
                        <button>About Us</button>
                        <ul>
                            <li>
                                <a href="">sub-1</a>
                            </li>
                            <li>
                                <a href="">sub-2</a>
                            </li>
                            <li>
                                <a href="">sub-3</a>
                            </li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>
    </div>

Below is the css for the above html

* {
    padding:0;
    margin:0;
    box-sizing: border-box;
    font-family:Arial, sans-serif;
}
.container {
    background-color: blue;
    width:100%;
    display: flex;
    justify-content: center;
    align-items: center;
    height:70px;
}

.sub-one {
    position: absolute;
    display:flex;
    height:40px;
    width:20%;
    justify-content: space-around;
}

.home, .about-us {
    margin-top:15px;
    width:150px;
}

.sub-one ul {    
    list-style:none;
}


.sub-one ul li button:hover + ul{
    display:block;
}
.sub-one ul li ul:hover {
    display:block;
}

.sub-one ul li ul {
    width:100%;
    background-color:lightblue;
    text-align: center;
    display:none;
}

.sub-one ul li ul li {
    margin-bottom: 5px;
}

.sub-one ul li ul li:hover {
    background-color: seagreen;
}

.sub-one a {
    color:white;
    text-decoration:none;
}

.sub-one button {
    color:white;
    outline: none;
    background: none;
    border: none;
    cursor: pointer;
}