We would like to know how to hide div dropdown menu text when not hovered.
<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
div.dropdown {<!-- w w w. j a v a2 s .co m-->
position: absolute;
width: 920px;
height: 20px;
top: 110px;
left: 50%;
margin-left: -460px;
z-index: 1;
background-color: gray;
-webkit-transition: height 2s ease;
background: black;
text-align: center;
color: red;
overflow: hidden;
}
div.dropdown:hover {
height: 55px;
-webkit-transition: height 0.1s ease;
transition: height 0.1s ease;
}
</style>
</head>
<body>
<div class="dropdown">
Menu <br />Games <br />Test
</div>
</body>
</html>
The code above is rendered as follows: