div包装器之间样式元素的继承

Question

很多年前（大约2011年），我开发了一个纯CSS扩展菜单，现在我将其应用到具有某些新CSS功能的新站点。它几乎可以实现我想要的一切。

但是，我的CSS似乎有很多冗余，因此我一直在尝试使用div作为包装器来清理它，并使用每个元素共同的样式来设置每个div的样式。

此过程突显了我对CSS的理解上的不足。

一个父菜单项（或“块”）的HTML如下：

<div class="menuWrapper">
    <div class="menuBlockOf4">
        <div class="menuButtonFirst"><a href="about_us.html">About us</a></div>

        <div class="submenuWrapper">
            <div class="submenuButton"><a href="about_us-mission_and_vision.html">Mission and vision</a></div>
            <div class="submenuButton"><a href="about_us-philosophy.html">Philosophy</a></div>
            <div class="submenuButton"><a href="about_us-system.html">System</a></div>
            <div class="submenuButtonFinal"><a href="about_us-our_staff.html">Our staff</a></div>
        </div>
    </div>
</div>

对于每种menuBlockOf4类型通用的任何样式元素，我已将其应用于menuWrapper，并将其从menuBlockOf4中删除。具体来说，我从menuBlockOf4中删除了“ display”和“ float”元素，并将它们放置在menuWrapper中。

.menuWrapper
{
    display: block;
    float: right;
}

.menuBlockOf4
{
    width: 231px;
    height: 28px;
}

我的理解是menuBlockOf4应该继承menuWrapper的样式元素。但是，它们不是，而是破坏了所有样式和功能。

任何人都可以解释我可能（或正在做）的错误吗？谢谢。