如何更改twitter-bootstrap导航栏的框阴影？

Question

我正在使用twitter-bootstrap，基于此帖子 ，我具有以下代码来生成带有阴影框的导航栏：

这是关于effect1的有效提琴： http : //jsfiddle.net/X4drb/15/

但是，如果我尝试使用effect2，则不会显示阴影： http : //jsfiddle.net/X4drb/16/

CSS

/*==================================================
 * Effect 1
 * ===============================================*/
.effect1{
    -webkit-box-shadow: 0 10px 6px -6px #777;
       -moz-box-shadow: 0 10px 6px -6px #777;
            box-shadow: 0 10px 6px -6px #777;
}

/*==================================================
 * Effect 2
 * ===============================================*/
.effect2
{
  position: relative;
}
.effect2:before, .effect2:after
{
  z-index: -1;
  position: absolute;
  content: "";
  bottom: 15px;
  left: 10px;
  width: 50%;
  top: 80%;
  max-width:300px;
  background: #777;
  -webkit-box-shadow: 0 15px 10px #777;
  -moz-box-shadow: 0 15px 10px #777;
  box-shadow: 0 15px 10px #777;
  -webkit-transform: rotate(-3deg);
  -moz-transform: rotate(-3deg);
  -o-transform: rotate(-3deg);
  -ms-transform: rotate(-3deg);
  transform: rotate(-3deg);
}
.effect2:after
{
  -webkit-transform: rotate(3deg);
  -moz-transform: rotate(3deg);
  -o-transform: rotate(3deg);
  -ms-transform: rotate(3deg);
  transform: rotate(3deg);
  right: 10px;
  left: auto;
}

HTML

<nav class="navbar navbar-default effect1">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">  <i class="fa fa-bars"></i>
            </button> <a class="navbar-brand" href="index.html"><img src="http://placehold.it/30x30&text=logo" ></a>

        </div>
        <div class="collapse navbar-collapse">
            <ul class="nav navbar-nav">
                <li class="active"><a href="#">Hello</a>
                </li>
                <li><a href="#">Stack</a>
                </li>
                <li><a href="#">Overflow</a>
                </li>
            </ul>
        </div>
    </div>
</nav>

为什么第一个效果完美，而第二个效果不完美？ 我想念什么？ 你有什么想法吗？

Answer 1

尺寸很小的菜单显示阴影。 在样式中，您需要更改bottom的值，直到看到阴影并为.effect2:before, .effect2:after添加display:block