Hi all

I have a simple demo here to illustrate my problem.

http://www.ttmt.org.uk/forum/shadow/

It's a list of floated images that have white borders.

On hover the images have a box shadow.

My problem is the box shadow is above the image on the left but below the image on the right.

I want the shadow to appear on top of the images either side.


Code:
<!DOCTYPE html>
<html>
  <head>
  <title>Title of the document</title>
  
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
  <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.4.1/build/cssreset/cssreset-min.css">
  
  <style type="text/css">
    ul{
      margin:50px;
    }
    ul li{
      display:block;
      float:left;
    }
    ul li a{
      margin:2px;
    }
    ul li a img{
      border: 6px solid white;
    }
    ul li a:hover img{
      box-shadow:1px 1px 10px 10px #ccc;
      -moz-box-shadow:1px 1px 10px 10px #ccc;
      -webkit-box-shadow:1px 1px 10px 10px #ccc;
      z-index:100;
    }
  </style>
  
  </head>
  
<body>

  
  <ul>
    <li><a href=""><img src="images/car01.jpg" alt="" /></a></li>
    <li><a href=""><img src="images/car02.jpg" alt="" /></a></li>
    <li><a href=""><img src="images/car03.jpg" alt="" /></a></li>
    <li><a href=""><img src="images/car04.jpg" alt="" /></a></li>
    <li><a href=""><img src="images/car05.jpg" alt="" /></a></li>
    <li><a href=""><img src="images/car06.jpg" alt="" /></a></li>
    <li><a href=""><img src="images/car07.jpg" alt="" /></a></li>
    <li><a href=""><img src="images/car08.jpg" alt="" /></a></li>
  </ul>


</body>

</html>