I'm building a 'table' that lists some events by row. I need the first item in each row to have a hover action that shows some short text when the mouse hovers over the link. Getting the hover to work has been quite straightforward as I've used the common method of having an additional class within the <a> that has it's display property switched on hover. For a single row in the table it works perfectly. However, when there's more than one row, the hover action - showing this text - always affects the row beneath. The best I've been able to do is to cause the row below to display properly, but move so that it's completely below the hover text, which means you get a horrid shifting about of the list as you run the mouse up and down the list. What I want, ideally, is for the 'hover' box to be completely independent of what's shown on the screen in the 'table', having no effect on it at all. I thought z-index might do this but I'm having absolutely no joy so far. I've said 'table' throughout since I've actually built this using <div>s at the moment (because I thought this might be the solution) but I'll quite happily use a table if that's easier or is the solution (in effect this is a table so it's actually proper usage). This code demonstrates the problem. What I want to happen is for the 'This is hover text' box to appear as it does, but to leave the other rows exactly as they are before any hovering happens, if you see what I mean... <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <html> <head> <title>CSS Hover on Table</title> <style type='text/css'> .row{position:relative;float:left;clear:left} .cell1{float:left;width:200px} .cell1 a{text-decoration:none} .cell1 a span{position:relative;display:none;width:180px;height:80px;top:-10px;left:20px;border:1px #000 solid;background:#ddd} .cell1 a:hover span{display:block} .cell2{float:left;width:200px} .cell3{float:left;width:200px} </style> </head> <body> <p>Simple demo of CSS hover problem on rows of data</p> <div class='row'> <div class='cell1'><a href='#'>Link text<span>This is hover text</span></a></div> <div class='cell2'>Cell 2</div> <div class='cell3'>Cell 3</div> </div> <div class='row'> <div class='cell1'><a href='#'>Link text<span>This is hover text</span></a></div> <div class='cell2'>Cell 2</div> <div class='cell3'>Cell 3</div> </div> <div class='row'> <div class='cell1'><a href='#'>Link text<span>This is hover text</span></a></div> <div class='cell2'>Cell 2</div> <div class='cell3'>Cell 3</div> </div> <div class='row'> <div class='cell1'><a href='#'>Link text<span>This is hover text</span></a></div> <div class='cell2'>Cell 2</div> <div class='cell3'>Cell 3</div> </div> </body> </html> Code (markup): As mentioned, I'm using divs here because I thought it would help the solution, if there's a way of doing it with tables, I'm more than happy to. Jon