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

Question

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;
}

Answer 1

These are the changes you need to do:

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

And here also

.sub-one ul li:hover ul{
    display:block;
}
.sub-one ul li ul li:hover{
    background:orange;
}

FULL CODEPEN LINK: https://codepen.io/emmeiWhite/pen/poELGzm

Answer 2

Giving a class to dropdowns and edited CSS.

 * { 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; } /* here what is edited with class.dropdown added*/.sub-one ul li:hover.dropdown{ display:block; } /* above edited */.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; }

 <div class="container"> <div class="sub-one"> <div class="home"> <ul> <li> <button>Home</button> <ul class='dropdown'> <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 class='dropdown'> <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>