如果孩子不在父母内部,则在悬停父母时保持对孩子的悬停效果

我在jsfiddle上有一个简单的例子:http://jsfiddle.net/to1hmg1L/

正如你所看到的,当你将鼠标悬停在.parent该.child会显示出来.问题是当你将鼠标悬停在.child它上面时会消失.因为.parent不是真正的父母(孩子不在父母的div内).我想保持.child悬停时可见的.parent和.child.我只是想创建类似弹出窗口(菜单下拉菜单)的东西.请仅使用HTML,CSS和JS的解决方案.

.parent {
  background-color: #32CD32;
  width: 100px;
  height: 40px;
  display: block;
  
}
.child {
  background: #bada55;
  width: 100px;
  height: 75px;
  display: none;

}
.parent:hover + .child {
  display: block;
}

.parent {
  background-color: #32CD32;
  width: 100px;
  height: 40px;
  display: block;
  
}
.child {
  background: #bada55;
  width: 100px;
  height: 75px;
  display: none;

}
.parent:hover + .child, .child:hover {
  display: block;
}