Html 长方体阴影对某些图元有效，对其他图元无效？

我讨厌发表这样的问题，但我真的要发疯了。我有一些css来定义一个方框阴影。它工作得很好，然后我突然注意到它在我的菜单面板上不工作了。它可以作用于页面上的每个元素，但菜单面板除外

下面是.shadow类css

.shadow {
  box-shadow: 2px 2px 5px 1px rgba(0,0,0, 0.6);
}

这是菜单面板css

.menu-panel {
  position: absolute;
  background-color: white;
  width: 350px;
  visibility: hidden;
}

这是菜单按钮css，它是打开面板的按钮。阴影在上面很好

.menu-button-clipped {
  position: absolute;
  background:url(../images/menu-icon-64.png) no-repeat;
  background-size: 28px 28px;
  background-position: 18px 18px;
  /*background-color: rgba(43, 140, 236, 1.0);*/
  background-color: #F62A2A;
  height: 64px;
  width: 64px;
  border-radius:50%;
  overflow:hidden;
  margin:auto;
}

下面是用小胡子构建HTML模板的javascript

  var menuButtonTemplate = '<div id={{ menuButtonID }} class="menu-toggle menu-button-clipped shadow"></div>';
  var menuPanelTemplate = '<div id={{ menuPanelID }} class="shadow menu-panel" ><h1>Settings</h1>' +
    '<table class="radio-button-group"><thead><tr><th colspan="2">Graph Options</th></tr></thead><tbody>' +
    '<tr class="graph-toggle" data-name={{ graphName }} ><td>Activate</td><td class="cell activate"><div class=radio-button-off></div></td></tr>' +
    '<tr class="graph-toggle" data-name={{ graphName }} ><td>Deactivate</td><td class="cell deactivate"><div class=radio-button-on></div></td></tr>' +
    '</tbody></table>' +
    '<table class="radio-button-group"><thead><tr><th colspan="2">Axis Options</th></tr></thead><tbody>' +
    '<tr class="graph-toggle" data-name={{ graphName }} ><td>Link</td><td class="cell link_axis"><div class={{ linkedState }}></div></td></tr>' +
    '<tr class="graph-toggle" data-name={{ graphName }} ><td>Un-link</td><td class="cell unlink_axis"><div class={{ unlinkedState }}></div></td></tr>' +
    '</tbody></table>' +
    '<table class="radio-button-group"><thead><tr><th colspan="2">Trace Options</th></tr></thead><tbody>' +
    '<tr class="graph-toggle" data-name={{ graphName }} ><td>Show Traceline</td><td class="cell trace_lines"><div class=radio-button-off></div></td></tr>' +
    '<tr class="graph-toggle" data-name={{ graphName }} ><td>Hide Traceline</td><td class="cell no_trace_lines"><div class=radio-button-on></div></td></tr>' +
    '</tbody></table>' +
    '</div>';

  $('#' + menuButtonID).css({ zIndex: '200', marginLeft: '-26px'});
  $('#' + menuButtonID).css('marginTop', yOffset - 26);
  $('#' + menuPanelID).css({ zIndex: '150', marginLeft: '0px'});
  $('#' + menuPanelID).css('marginTop', yOffset);
  $('#' + menuPanelID).css('height', height);

var menuButtonTemplate=''；
var menuPanelTemplate='Settings'+
“图形选项”+
“激活”+
“停用”+
'' +
“轴选项”+
“链接”+
“联合国链接”+
'' +
“跟踪选项”+
“显示轨迹线”+
“隐藏轨迹线”+
'' +
'';
$（'#'+menuButtonID）.css（{zIndex:'200'，marginLeft:'-26px'}）；
$（'#'+menuButtonID）.css（'marginTop'，yOffset-26）；
$（'#'+menuPanelID）.css（{zIndex:'150'，marginLeft:'0px'}）；
$（'#'+menuPanelID）.css（'marginTop'，yOffset）；
$（'#'+menuPanelID）.css（'height'，height）；

为了让事情变得更简单，下面是在面板中没有任何内容的情况下，普通的旧HTML的外观

<div class="menu-toggle menu-button-clipped shadow"></div>
<div class="shadow menu-panel"><some heading and table stuff></div>

阴影在菜单按钮div上工作，但在面板上不显示。当我在safari中检查源代码时，它将框阴影显示为面板的css属性…它只是没有实际渲染它。有人能告诉我我是否犯了一个明显愚蠢的错误吗

---

谢谢

您能创建一个JSFIDLE来说明这个问题吗？你可以看到面板没有暗井当然没有，你有

可见性：hidden

啊，是的。这是通过javascript切换的。好的，显然我不能用JSFIDLE复制这个问题。这里的实际功能是什么？面板不可见，因此没有阴影，请删除“可见性：隐藏”，它将显示阴影。你想达到什么目标？