CSS shadow / fade shadow?

Question

I have a CSS drop-down menu that I'm trying to create, and against the background of the drop-down list there is a fading / narrowed box shadow:

I am having trouble getting the box shadow to actually narrow / fade.

Here where I am now: http://jsfiddle.net/Shpigford/f9aKR/

I tried using the :before and :after pseudo-dealers, among other things, but don't quite understand.

To find out, I especially need help with the drop shadow. My jsFiddle is a stripped-down version to make this example as simple as possible.

Answer 1

• I have added the before element.
• gave him a gradient background (from translucent to translucent black) to achieve upper and lower attenuation.
• gave him the shadow of the insert insert to achieve in → outfade.

Take a look → http://jsfiddle.net/f9aKR/22/

Change the amount of fading / color as you like.