导航栏悬停在多个列表中

Question

问：当将鼠标悬停在包含子菜单的按钮或列表项上时，如何将display:none;列表移至display:block;？

jsfiddle

列表的CSS：

.nav-menu-list {
  font-family:'Code Source Pro';
  list-style-type:none;
  color:white;
  background:#242424;
  text-align:center;
  position:absolute;
  font-size:1rem;
  width:110px;
  top:40px;
  right:0;
  z-index:50;
  display:none;
}

.nav-menu-list .nav-sub-menu-1 {
  background:#242424;
  top:0;
  position:absolute;
  width:110px;
  right:111px;
  display:none;  
}

我尝试了什么：

.nav-menu-btn:hover .nav-menu-list {
  display:block;
}

和

.nav-menu-btn:hover > .nav-menu-list {
      display:block;
}

和

.nav-menu-btn:hover .nav-menu-list {
  display:inline-block;
}

我觉得我错过了一些基本的东西。

Answer 1

Demo Fiddle

您需要使用：

.nav-menu:hover .nav-menu-list{
    display:block;
}
.nav-menu-list li:hover ul{
    display:block;
}