如何在li上显示隐藏的DIV：只用CSS悬停？

Question

当鼠标悬停在“.menu1_butt_1”时，我想显示隐藏的div“.menu1_element_1”。只有CSS，而不是jQuery。它是否可能与所有网页浏览器兼容？

jsFiddle DEMO

html

<div class="menu1_sub">
  <div class="menu1_element_1">
    <h5>Sample text</h5>
  </div>
  <ul>
    <li class="menu1_butt_1">Menu Item 1</li>
  </ul>
</div>

CSS

.menu1_sub {
  position: absolute;
  width: 500px;
  padding: 10px 0px 10px 0px;
  background: #fff;
}
.menu1_sub ul {
  width: 200px;
  float: right;
  border-left: 1px solid #cacdd0;
}
.menu1_sub ul li {
  text-align: left;
  padding: 4px 0px 4px 12px;
  color: #6c6c6c;
  display: block;
  border: 1px solid #ffffff;
}
.menu1_element_1 {
  display: none;
  width: 200px;
}
.menu1_butt_1:hover ~ .menu1_element_1 {
  display: inline-block;
}