div标签的全高颜色填充

Question

我是网络新手。我遇到了奇怪的div标签行为 - div元素的背景不会在完整的div内容上传播：

我需要包含三角形的白色条纹为深蓝色（上部）颜色。

这是我的HTML：

<div>
<div class="menu-header">
    <table class="stretched-width menu-table">
        <col width="60px">
        <col>
        <col width="60px">
        <col width="60px">
        <col width="60px">
        <col width="60px">
        <col width="60px">
        <tbody>
            <tr>
                <td>
                    <div onclick='navigate(this, "Profile", @Model.VisitUserId)'
                         id="profile"
                         class="menu-item-container">
                        <img src="../../Content/Images/profile.png" class="menu-icon" />
                        <div class="header-triangle profile-pointer"></div>
                    </div>
                </td>
                <td><div></div></td>
                <td>
                    <div onclick='navigate(this, "Goals", @Model.VisitUserId)'
                         class="menu-item-container">
                        <img src="../../Content/Images/goals.png" class="menu-icon" />
                        <div class="header-triangle goals-pointer"></div>
                    </div>
                </td>
                <td>
                    <div onclick='navigate(this, "Achievements", @Model.VisitUserId)'
                         class="menu-item-container">
                        <img src="../../Content/Images/achievements.png" class="menu-icon" />
                        <div class="header-triangle achievements-pointer"></div>
                    </div>
                </td>
                <td>
                    <div onclick='navigate(this, "Peoples", @Model.VisitUserId)'
                         class="menu-item-container">
                        <img src="../../Content/Images/peoples.png" class="menu-icon" />
                        <div class="header-triangle peoples-pointer"></div>
                    </div>
                </td>
                <td>
                    <div onclick='navigate(this, "Statistics", @Model.VisitUserId)'
                         class="menu-item-container">
                        <img src="../../Content/Images/statistics.png" class="menu-icon" />
                        <div class="header-triangle statistics-pointer"></div>
                    </div>
                </td>
                <td>
                    <div onclick='navigate(this, "Settings", @Model.VisitUserId)'
                         class="@(Model.IsOwner ? "visible" : "hidden") menu-item-container">
                        <img src="../../Content/Images/settings.png" class="menu-icon" />
                        <div class="header-triangle settings-pointer"></div>
                    </div>
                    <div class="@(Model.IsOwner ? "hidden" : "visible") menu-item-container">
                        <a href="@Url.Action("Home")">
                            <img src="../../Content/Images/home.png" class="menu-icon" />
                        </a>
                    </div>
                </td>
            </tr>
        </tbody>
    </table>
</div>

<div id="region_content"></div>

可能是什么问题？

编辑：Css代码

.menu-header {
    background: #00A2E8;
}

.menu-table {
    margin: 0 0 14px 0;
}

.stretched-width {
    width: 100%;
}

.menu-item-container {
    margin: 10px 5px 0 5px;
}

.menu-icon {
    height: 50px;
    width: 50px;
}

.header-triangle {
    height: 0px;
    width: 0px;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 10px solid;
    position: absolute;
    margin-left: 15px;
    margin-top: 5px;
    visibility: hidden;
}

.profile-pointer {
    color: #AFE2EF;
}