Question

I am working with:

#top ul li.corner span.right-corner:hover {     background-image:url('images/corner-right-over.gif');     width:4px;     height:15px;     float:left; }  #top ul li.corner span.left-corner:hover {     background-image:url('images/corner-left-over.gif');     float:left;     width:4px;     height:15px; } 

And I can’t seem to get the :hover working properly? Not sure why, does anyone have any suggestions?

Answer 1

I believe the problem is that SPAN elements display inline by default – meaning they have no height and width. Try explicitly making them block level elements by adding:

#top ul li.corner span.right-corner, #top ul li.corner span.left-corner {     display: block; }