Question

我创建了一个菜单（不使用我不喜欢的ul和li元素），它显示每个按钮的子菜单，我想要的是能够添加子子菜单，（和子子菜单） ...）没有为每个添加新的CSS。这就是我实际上（简化）：

<div class="button"><a href="#">One button</a>
   <div class="submenu">                                //what works
      <div class="button">something</div>
      <div class="button">something</div>
   </div>
</div>
<div class="button"><a href="#">Another button</a>
   <div class="submenu">
      <div class="button">something</div>

      <div class="submenu">                            //what I'm trying (sub-sub)
          <div class="button">something</div>
          <div class="button">something</div>
      </div>

   </div>
</div>

和css：

.button
{
    background-color:#ffffff;
    position:relative;
    width:200px;
    height:20px;
    display:block;
}
.submenu
{
    background-color:#ffffff;
    display:none;
    position:absolute;
    top:0;
    left:200px;
}
.button:hover div
{  
    display:block;
}

我试图使用第一个孩子，但它不起作用，我不想怎么做......

由于

Answer 1

.button:hover > div {  
    display:block;
}

您需要>仅针对直接子女。没有它，所有与最后一个选择器匹配的子项将设置为display:block。

将鼠标悬停在div上以显示另一个div，依此类推

1 个答案: