html - 导航栏悬停在多个列表中

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