We would like to know how to hover element to show child.
<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
.menuBody {<!-- w ww. j a v a 2 s .c o m-->
display: none;
background: #ccc;
}
.menuItem {
background: #aaa;
}
.menuItem:hover {
background: red;
}
.menuItem:hover .menuBody {
display: block;
}
</style>
</head>
<body>
<ul>
<li class="menuItem">
<a href="#">MenuItem</a>
<div class="menuBody">Hover!</div>
</li>
</ul>
</body>
</html>
The code above is rendered as follows: