带有多个列表的悬停导航栏

Question

Q：将鼠标悬停在具有子菜单的按钮或列表项上时，如何将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

演示Fiddle

您需要使用：

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