html - Need my div dropdown menu to hide text when not hovered -


i'm trying dropdown menu div. transition on div fine , working great. don't know how text that's in dropdown area hidden when i'm not hovering?

html code. not droping down should. don't want menu hidden text writen below it.

<div class="dropdown">menu     <br/>games     <br/>food      </div> 

css code. transitions , all.

div.dropdown {     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:white; }  div.dropdown:hover {     height: 45px;     -webkit-transition: height 0.1s ease; } 

you can use css:

overflow: hidden; 

in .dropdown class.

this allow hide displays outside of elements bounds.

here's fiddle


Comments

Popular posts from this blog

jquery - How can I dynamically add a browser tab? -

node.js - Getting the socket id,user id pair of a logged in user(s) -

keyboard - C++ GetAsyncKeyState alternative -