我正在尝试使用从左侧浮动的菜单托盘制作固定位置菜单栏。一切正常，但从左侧z位置浮动的托盘位于主菜单上方。
结果，我看不到我在顶部菜单栏上应用的底部阴影。
body {
background: red;
}
.main-menu {
position: fixed;
background: #ffffff;
top: 0;
left: 0;
width: 100vw;
height: 40px;
box-shadow: 0 3px 1px 0 rgba(150, 150, 150, 0.6);
}
.left-menu {
background: #ffffff;
position: absolute;
top: 100%;
left: 0;
width: 200px;
height: 500px;
box-shadow: 0 2px 1px 0 rgba(150, 150, 150, 0.6)
}<html>
<body>
<div class="main-menu">
<div class="left-menu"></div>
</div>
</body>
</html>一种解决方案是使用插入框阴影在左菜单中重复菜单栏的阴影。
body {
background: red;
}
.main-menu {
position: fixed;
background: #ffffff;
top: 0;
left: 0;
width: 100vw;
height: 40px;
box-shadow: 0 3px 1px 0 rgba(150, 150, 150, 0.6);
}
.left-menu {
background: #ffffff;
position: absolute;
top: 100%;
left: 0;
width: 200px;
height: 500px;
box-shadow: 0 2px 1px 0 rgba(150, 150, 150, 0.6),
inset 0 3px 1px 0 rgba(150, 150, 150, 0.6);
}<html>
<body>
<div class="main-menu">
<div class="left-menu"></div>
</div>
</body>
</html>但我意识到这有点像kludge，我希望有更好的答案！
我需要让两个菜单兄弟姐妹应用z-index。我还为视觉效果添加了一些颜色。由于这两个菜单现在是兄弟姐妹，我需要调整top的left-menu，类似于main-menu的高度
body {
background: red;
}
.main-menu {
position: fixed;
background: #ffffff;
top: 0;
left: 0;
width: 100vw;
height: 40px;
box-shadow: 0 3px 1px 0 rgba(150, 150, 150, 0.6);
z-index: 999;
background-color: green;
}
.left-menu {
background: #ffffff;
position: absolute;
top: 40px;
left: 0;
width: 200px;
height: 500px;
box-shadow: 0 2px 1px 0 rgba(150, 150, 150, 0.6);
background-color: blue;
}<html>
<body>
<div class="main-menu">
</div>
<div class="left-menu"></div>
</body>
</html>