Html 框阴影未出现在<；标题>；标签

我有一个

标签，我希望它有一个框阴影来改善它的外观。但是，长方体阴影不会显示。我刚开始用的是

，它很管用

我认为

在语义上更正确，所以我使用了它

这是我的标记：
menubar.php

<header>
    <nav>
        <ul>
            <li><a href="home.html">Home</a></li>
            <li>
                <a href="#">Maintenance <span class="caret"></span></a>
                <div>
                    <ul>
                        <li><a href="?goto=country">Countries</a></li>
                        <li><a href="?goto=province">Provinces</a></li>
                        <li><a href="?goto=mobile">Mobile</a></li>
                        <li><a href="?goto=customer">Customer</a></li>
                    </ul>
                </div>
            </li>
            <li><a href="?goto=logout">Log Out</a></li>
        </ul>
    </nav>
</header>

屏幕截图（如果有帮助）：

我希望有人能帮我。干杯

更新：
我在JSFIDLE上试用过，效果很好。我知道它会起作用，但不幸的是，它不起作用。

---

我正在Chrome和IE11上测试它（带或不带EmulateIE8）

应用相对位置和z索引；或者增加边距底部，直到看到阴影

位置：相对；z-index:10

有什么问题？这对我很管用检查小提琴它对我不管用。我在Chrome和IE11上都使用它。我在使用Chrome，它工作得很好。在其他评论中，检查它是否对你有用。它是。我甚至亲自测试了它，它正在工作。我知道这应该是可行的，但我提供了一个截图，让你知道我不是在开玩笑。我很想知道这为什么能解决这个问题。我只是尝试了一下，效果很好，但我甚至无法理解为什么这会产生影响。你怎么知道的？

header{
       background: #fee;
       height: 120px;
       padding: 20px;
       border-bottom: 5px solid #f53301;
       -webkit-box-shadow: 0 12px 16px -6px black;
       -moz-box-shadow: 0 12px 16px -6px black;
       box-shadow: 0 12px 16px -6px black;
      }