多维不能悬停到第二菜单

Question

我有一个多维下拉菜单。但它无法悬停到二级菜单。它会从第一级菜单中移出而消失。从第1级菜单鼠标悬停时如何保持第2级菜单？

var lvcontainer = document.getElementsByClassName('lvcontainer');
var rvcontainer = document.getElementsByClassName('rvcontainer');

for (i = 0; i < lvcontainer.length; i++) {  // loop to the length
  (function(protectedIndex) {               // protect the index so clicks won't use last increment of i

    // show
    lvcontainer[protectedIndex].addEventListener("mouseover", function() {
      rvcontainer[protectedIndex].style.display = "block"; 
    }, false);

    // hide
    lvcontainer[protectedIndex].addEventListener("mouseout", function() {
      rvcontainer[protectedIndex].style.display = "none";
    }, false);
  })(i);
}

CSS

body {
  margin: auto;
}

#container {
  display: table;
}

#lcontainer {
  padding: 0 10px 0 10px;
  display: table-cell;
}

#rcontainer {
  padding: 0 10px 0 10px;
  display: table-cell;
}

.rvcontainer {
  display: none;
}

HTML

<div id="container">
  <div id="lcontainer">
    <div class="lvcontainer">
      Country
    </div>
    <div class="lvcontainer">
      Genre
    </div>
  </div>
  <div id="rcontainer">
    <div class="rvcontainer">
      Japan
      <br> Korea
      <br> American
      <br>
    </div>
    <div class="rvcontainer">
      Comedy
      <br> Mystery
      <br> Horror
      <br>
    </div>
  </div>
</div>

上面的代码，如果来自lvcontainer的mouseout，rvcontainer将会消失。鼠标悬停到rvcontainer时如何保持lvcontainer和rvcontainer？ CSS解决方案更受欢迎。