How to show drop shadows on LIs in a 960 grid based layout?

Question

I am trying to create a page showing a list of products in a grid (960.gs) format. To match the COMP, I need to show a drop shadow on a LI when the user hovers above it.

Showing the drop shadow on a hover is simple, but showing it the way as it is in COMP is turning out to be a difficult task to complete and I need some assistance.

Below is the screen-shot of the COMP I have to match.

The numbers 1 to 10 are grids. I am using ULs to create rows and LIs to show product items in the row.

<!-- loops n times for n rows -->
<UL class="container_10 clearfix">
    <!-- loops 5 times for 5 list items in a row -->
    <LI class="grid_2 product">
        <UL>
            <LI class="prodImg clearfix">...</LI>
            <LI class="prodTitle clearfix">...</LI>
            <LI class="prodPrice clearfix">...</LI>
            <LI class="prodPromo clearfix">...</LI>
            <LI class="prodReviews clearfix">...</LI>
        </UL>
    </LI>
</UL>

As can be seen in the screen-shot the shadow flows out of the grid layout.... I have now clue how to incorporate that here.

edit: As per project requirements we are only supporting modern browsers, so no worries about IE6 or other junk browsers, I am allowed to use CSS3 :)

Answer 1

Since you don't need to accommodate less accommodating browsers, I would use a combination of pseudoelements and CSS box-shadow:

CSS:
.product {
  position: relative;
}
.product:after {
  content: '';
  position: absolute;
  top: -10px;
  right: -10px;
  bottom: -10px;
  left: -10px;
}
.product:hover:after {
  box-shadow: 0 0 5px #CCC;
}

The .product:after declaration creates an element outside of the flow of the document positioned relative to the .product element. The .product:hover:after declaration creates the drop shadow. Adjust the measurements, etc. to fit your mockup.

Here's an example: http://jsfiddle.net/blineberry/SMqDx/