一个div跟随更高的z-index div

Question

对不起标题，很难解释。 在that page我有一个带子菜单的菜单，如果你继续＆＃34; Nos formations＆＃34;按钮，您将看到一个长的子菜单，它位于背景图像下面，这使得它的可读性降低。

所以这就是我所拥有的（简化）：

<div id="backgroundimage"  style="z-index:1 ..."></div>    
<div id="menu" style="z-index:5">
    <div id="submenu">
         <div id="button1">
         <div id="button2">
    </div>
</div>

我的想法是在每个按钮下放置一个不透明的div，但在z-index为0时，它们位于背景图像下，因此它们永远不会隐藏它。但由于按钮包含在另一个div中，似乎不可能。

那么有一个简单的解决方案吗？ （如果可能的话，避免使用javascript）

由于

Answer 1

我建议您限制子菜单的高度并使其滚动：

.smLongHeight{
   max-height: 200px;
   over-flow: auto;
 }

Answer 2

我建议您使用：last-child 参数将最后一个按钮背景不透明度设置为1.现在可以帮助您，但我更喜欢使用Javascript来使最后一个按钮更加不透明

使用CSS，我认为你只能使用：

#menu #submenu div:last-child{ background: rgba(255,255,255,1); }