This tutorial explains how to create a block hover effect for a list of links form using a clean CSS design with only li,span and em tags.

Step:1 Basic HTML Structure

[code lang="htmlstrict"]

    

      
Link Heading One
        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
         Ut viverra dui nec risus. In eu neque a tortor lacinia rhoncus.
        20th june 2009
 
        
     
Link Heading Two
        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
         Ut viverra dui nec risus. In eu neque a tortor lacinia rhoncus.
        21th june 2009
 
        
         
Link Heading Three
        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
         Ut viverra dui nec risus. In eu neque a tortor lacinia rhoncus.
        22th june 2009
 
    
 
[/code]

Step:1 CSS Code

[code lang="css"]
#linkBox ul {
        list-style-type: none;
        width: 400px;
} 

#linkBox li {
        margin: 5px 0;
	border-bottom:1px dotted #ccc;
	border-top:1px dotted #ccc;
}

#linkBox li a { 
        color: #E67701;
        display: block;
        font: bold 100.1% "Georgia", Times New Roman, Times, serif;
        padding: 5px;
        text-decoration: none;
	line-height:182.5%;
		
}

 * html #linkBox li a {  /* make hover effect work in IE */
	width: 400px;
}

#linkBox li a:hover {
        background: #eeeeee;
}

#linkBox a em { 
        color: #333;
        display: block;
        font: normal 82.5% "Georgia", Times New Roman, Times, serif;
        line-height: 182.5%; 
}

#linkBox a span {
        color: #006AFF;
        font: normal 82.5% "Georgia", Times New Roman, Times, serif;
        line-height: 150%;
}
[/code]

The Example

Finally we are done. we created a block hover effect for a list of links. View my example and roll over the list items to see the block hover effect in action.