Box-shadow未出现在<header>标记</header>上

Question

我有<header>标签，我希望它有一个盒子阴影来改善它的外观。但是，框阴影不会显示。我最初使用<div>并且它正在工作。

我认为<header>在语义上更正确，所以我改用了它。

这是我的标记：
的 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>

以下是<header>代码的CSS：

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;
      }

截图（如果有帮助）：

我希望有人可以帮助我。干杯！

更新：
我在jsfiddle上尝试过，它工作得很好。我知道它会起作用，但不幸的是，它不起作用。
我正在Chrome和IE11上测试它（有或没有EmulateIE8）

Answer 1

应用位置相对和z-index;或者增加margin-bottom直到看到阴影position:relative;z-index:10