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

If you add position:relative to your LI tags, you could add an html element inside it that would be absolutely positioned outside and placed under the product image and infos.

If you want to avoid adding another html element, you could even use li:after to add it. I don't know if this is clear enough, if not, just ask, I'll try to provide a working example.