html - 盒子阴影未出现在 <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