Box-shadow not appearing on <header> tag

Question

I have a <header> tag and I want it to have a box-shadow to improve it's appearance. However, the box-shadow doesn't show up. I was using <div> at first and it was working.

I thought <header> is more semantically correct so I used it instead.

Here's my markup:
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>

Here's my CSS for the <header> tag:

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

A screenshot (if it can help):

I hope someone can help me with it. Cheers!

Update:
I tried it on jsfiddle and it's working just fine. I know it will work, but unfortunately, it isn't working.
I'm testing it on Chrome and IE11 (with or without EmulateIE8)

Answer 1

Apply position relative and z-index; or Increase margin-bottom till you see the shadowposition:relative;z-index:10