adding a drop shadow to drop down menu secondary links

Question

below is the JSFiddle for a drop down menu that I am using. Using just css can somebody please show me how to add a drop shadow to the secondary bar (the drop down bar) as I am not very good with CSS and I am still learning.

http://jsfiddle.net/tcKvH/1/

thanks

<div></div>

Answer 1

In the simplest way you can add this to your css.

#menu li ul li{
    background: #EEE;
    box-shadow: 5px 5px 5px #888;
}

But if you need cross browser compatibility you should look into browser specific prefixes and filters for IE

Answer 2

Try this

DEMO

#menu li a:hover {
    color:#c00;
    box-shadow: 10px 10px 5px #888888;
}