Show and hide CSS data


Show hide data with css, is something as simple as 2 by 2. In this example only css is used, but later I will bring with jquery, ect.

Css code:

<style type="text/css"> #container{ margin:0 auto; }   body { background:#ccc; } #dropdown ul .drop{ display:none; } #dropdown a { background:#ff0f0f; } #dropdown ul:hover .drop{ display: inline-block; padding-bottom:10px; } #dropdown ul .item{display:none;} #dropdown ul:hover .item{display:block;} padding-bottom:200px; </style>

Html code:

 <h3 align="center" style="color: #3c5487"> <u> CSS Tecnique</u></h3> <div id="container">         <div id="dropdown"> <ul>     <li><strong>Hover Over me</strong></li>     <li class="drop">Yes You can see me</li> </ul> <!--more--> <ul>     <li><strong>I am a small text</strong></li>     <li class="drop"> I am really, really, really, really, really, really, really, really, really, really, really really really big text.</li>   </ul> <ul>     <li><strong>I am not a link but..</strong></li>     <li class="drop"><a href="" target="_blank">I am a link</a></li>     <li>Joke : A very depressed man</li>     <li class="drop">There's a man sitting at a bar just looking at his drink. He stays like that for half an hour. Then, a big trouble-making truck driver steps next to him, takes the drink from the guy, and just drinks it all down.The poor man starts crying. The truck driver says, "Come on man, I was just joking. Here, I'll buy you another drink. I just can't stand seeing a man crying."   "No, it's not that. This day is the worst of my life. First, I fall asleep, and I'm late to my office. My boss, in an outrage, fires me. When I leave the building to my car, I found out it was stolen. The police say they can do nothing. I get a cab to return home and when I leave it, I remember I left my wallet and credit cards there. The cab driver just drives away. I go home and when I get there, I find my wife sleeping with the gardener. I leave home and come to this bar. And when I was thinking about putting an end to my life, you show up and drink my poison."</li> </ul>   </div></div> 


Please enter your comment!
Please enter your name here