如何让子块与父块大小相同

Question

短版显示效果更好：

我想创建一个导航栏，它在悬停时显示块，但无法解决如何让子元素成为其父元素的大小。我希望 Item 1.1, ... 与 Item 1 的宽度相同，依此类推，而在下面显示的示例中，您会发现这不起作用，原因我似乎无法理解。

#menu{
    width: 60%;
    min-width: 500px;
    height: 20px;
    display: flex;
    justify-content: space-between;
    margin: 10px auto 15px auto;
}
#menu li{
    width: calc(100% / 5 - 1%);
    min-width: 100px;
    height: 40px;
    display: block;
}
#menu li a{
    width: 100%;
    height: 20px;
    display: block;
    background-color:#fff;
    font-family: Helvetica Constantia, "Lucida Bright", "DejaVu Serif", Georgia, "serif";
    font-size: 0.7em;
    line-height: 20px;
    color: #6E4712;
    border: 2px solid rgba(127,201,154, 0.5);
    text-align: center;
    text-decoration: none;
}
#menu li a:hover{
    color: rgba(127,201,154, 0.5);
}
#menu .sous-menu{ 
    display: none;
    margin-top: -2px;
}
#menu .sous-menu li{
    width: 100%;
    height: 20px;
    display: block;
}
#menu .sous-menu li a {
    width: 100%;
    height: 20px;
    display: block;
    background-color: #fff;
    font-family: Helvetica Constantia, "Lucida Bright", "DejaVu Serif", Georgia, "serif";
    font-size: 0.7em;
    line-height: 20px;
    color: #6E4712;
    text-align: center;
    text-decoration: none;
}
#menu .sous-menu li a:hover{
    color: rgba(127,201,154, 0.5);
}
#menu li:hover .sous-menu{ 
    display: block;
    position: absolute;
}

        <nav>
            <ul id="menu">
                <li><a href="#">Item 1</a>
                    <ul class="sous-menu">
                        <li><a href="#">Item 1.1</a></li>
                        <li><a href="#">Item 1.2</a></li>
                        <li><a href="#">Item 1.3</a></li>
                        <li><a href="#">Item 1.4</a></li>
                    </ul>
                </li>
            </ul>
        </nav>

很抱歉，代码阅读起来很累，但我倾向于重复自己，因为是新手。

Answer 1

我已将 padding: 0; 添加到 #menu .sous-menu 并删除 position: absolute; 在 #menu li:hover .sous-menu。这应该有效：

#menu{
    width: 60%;
    min-width: 500px;
    height: 20px;
    display: flex;
    justify-content: space-between;
    margin: 10px auto 15px auto;
}
#menu li{
    width: calc(100% / 5 - 1%);
    min-width: 100px;
    height: 40px;
    display: block;
}
#menu li a{
    width: 100%;
    height: 20px;
    display: block;
    background-color:#fff;
    font-family: Helvetica Constantia, "Lucida Bright", "DejaVu Serif", Georgia, "serif";
    font-size: 0.7em;
    line-height: 20px;
    color: #6E4712;
    border: 2px solid rgba(127,201,154, 0.5);
    text-align: center;
    text-decoration: none;
}
#menu li a:hover{
    color: rgba(127,201,154, 0.5);
}
#menu .sous-menu{ 
    display: none;
    margin-top: -2px;
    padding: 0;
}
#menu .sous-menu li{
    width: 100%;
    height: 20px;
    display: block;
}
#menu .sous-menu li a {
    width: 100%;
    height: 20px;
    display: block;
    background-color: #fff;
    font-family: Helvetica Constantia, "Lucida Bright", "DejaVu Serif", Georgia, "serif";
    font-size: 0.7em;
    line-height: 20px;
    color: #6E4712;
    text-align: center;
    text-decoration: none;
}
#menu .sous-menu li a:hover{
    color: rgba(127,201,154, 0.5);
}
#menu li:hover .sous-menu{ 
    display: block;
}