html - 将鼠标悬停在一个 div 上以显示另一个 div 等等

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;
}

我试过用first-child但是没用，我不想怎么办...

谢谢

Answer 1

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

您需要 > 来仅定位直接子级。 如果没有它，所有匹配最后一个选择器的 child 都将被设置为 display:block。