如何通过子菜单增加悬停菜单的大小？

Question

我的悬停菜单太薄，该如何解决？例如，当您将鼠标悬停在“我们的产品”上时，它将以“容器生活区”作为子菜单，而该子菜单的背景太小了。另外，我如何证明该子菜单中的文本对齐。

类似地，当您将鼠标悬停在“ Container Living Quarter”上时，您将获得其他4个同样小（按按钮大小而言）的标签。

导航栏中的所有内容都应该具有相似的宽度和高度。

这是我第一次进行编码，并希望得到社区的帮助。

.nav-bar {
    background-color: #24252a;
    max-height: 150px;
    margin: 0;
    padding: 0;
}

li, a, button {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 15px;
    color: #edf0f1;
    text-decoration: none;
}

header {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: 15px 2%;
}

.logo {
    width: auto;
    height: auto;
    max-width: 150px;
    max-height: 150px;
    cursor: pointer;
    margin-right: auto;
}

.nav_links {
    list-style: none;
}

.nav_links li {
    display: inline-block;
    padding: 0px 20px;
}

.nav_links li a {
    transition: all 0.3s ease 0s;
    padding: 20px;
}

.nav_links li a:hover {
    color: #0088a9;
}

button {
    margin-left: 20px;
    padding: 9px 20px;
    background-color: rgba(0, 136, 169, 1);
    border: none;
    border-radius: 20px;
    cursor: pointer;
    transition: all 0.3s ease 0s;
}

button:hover {
    background-color: rgba(0,136,169,0.8);
}

.parent {
    display: block;
    position: relative;
}

.parent a{
    color: inherit;
    text-decoration: none;
}

.parent:hover > ul {
    margin-top: 20px;
    display: block;
    position: absolute;
}

.parent:hover > ul a{
    text-align: left;
}

.child {
    display: none;
}

.child li{
    background-color: #24252a;
    border-bottom: #edf0f1 1px solid;
    width: 100%;
}

.child li a {
    color: inherit;
}

ul {
    list-style: none;
    margin: 0;
    padding: 0px;
    min-width: 10em;
}

li:hover {
    background-color: #24252a;
}

.parent li:hover {
    background-color: #24252a;  
}

ul ul ul {
    left: 100%;
    top: -15px;
    margin-left: 1px;
}

  

<div class="nav-bar">
    <header>
        <nav>
            <ul class="nav_links">
                <li><a href="#">About Us</a></li>

                <li class="parent">
                    <a href="#">Our Products</a>
                        <ul class="child">
                            <li class="parent">
                                <a href="#">Container Living Quarter</a>
                                    <ul class="child">
                                        <li><a href="#">Bed</a></li>
                                        <li><a href="#">Shower</a></li>
                                        <li><a href="#">Toilet</a></li>
                                        <li><a href="#">All in one</a></li>
                                    </ul>
                            </li>
                        </ul>
                </li>    

                <li><a href="#">FAQs</a></li>

            </ul>
        </nav>
        <a class="cta" href="#"><button>Contact Us</button></a>
    </header>   
</div>