CSS Technique : Display Text/link with Hover effect
January 9th, 2009 by Kawsar Ali |
8 Comments
This is a CSS technique, I had to use when I was doing a project. One of the page of the site, there was so much text that the page became really long. I used this technique to make page shorter. I have tried putting like 200-300 words paragraph with the hover and It worked fine. I hope this helps someone for their project or in their website.
Demo is below:
Demo
How it is archived:
#dropdown ul .drop{
display:none;
}
#dropdown a {
background:#ff0f0f;
}
#dropdown ul:hover .drop{
display:block;
padding-bottom:10px;
}
If you enjoyed this post, get free updates by email or RSS.
Share it on Social Bookmarking Sites
You might also be Intrested in...
Too bad it doesn’t work in IE. Nice trick though
yap… I had this other one that worked take a look at here There is some kind of bug in this one..thanks for letting me know..I will do some more testing
Second link works only in IE7 (Also the layout is seriously messed up in IE6). IE has a problem with :hover pseudo-class. See http://shifteleven.com/articles/2006/12/14/mimicking-the-hover-pseudo-class-in-ie
I wasnt aware of all of this, thank you.
There are various questions that I had about link building but you have really done a great job clearing most of the up for me, thanks.
How do I add this to my RSS reader? Sorry I’m a newbie
nice trick. works fine in firefox – but as often is not working in my IE7.
Hi. Thanks for the tip. I’m in the process of re-designing my blog and I wanted to add this type of css effect. I’m curious if there is an other way of achieving this without using the div tag. The reason I ask is that I recently read an article on divitswhere it talks about the proper use of div tags which is to divide the page into different sections. The div tag used in this method is being used to create a design effect.