Efeito mouse hover em Li pai de menu drop down

-Nota: "Este tutorial visa personalizar um menu drop down já pronto, fazendo com que o 'Li pai'(Menu Pai) dos submenus fique destacado quando estivermos com 'mouse hover' sobre os submenus"

Para explicar melhor o que iremos fazer seguem duas imagens:

A primeira é como geralmente se comporta esse tipo de menu. Note que o menu About não apresenta a imagem quando navegamos pelos seus submenus:



Já a segunda é o nosso objetivo, ou seja, o menu About(Li pai) mostra uma imagem quando navegamos pelos submenus:



Lembrando que esse tutorial foi baseado no modelo de menu drop down ensinado por Maujor.
Mãos à obra!

1-Na primeira parte definimos a imagem que aparecerá no estado mouse hover sobre todos os links do menu:

Créditos: 10calco.blogspot.com

#drop-down ul li:hover a {
background-image: url(...imagem do estado mouse hover...);
}

...
...

2-Na segunda parte vamos enganar o css, fazendo com que a imagem acima não apareça nos submenus.
Digamos que cada item do nosso menu apresente um degrade azul como background. Então no código abaixo vamos definir esse mesmo degrade aos submenus.
Se não fizermos isso, quando colocarmos o mouse sobre o menu pai a imagem do estado mouse hover aparecerá sobre todos os itens do submenu:

#drop-down li ul a {
background-image: url(Ex: degrade_azul.jpg) !important;
}

...
...

3-Por último mostramos a imagem do estado mouse hover novamente, mas dessa vez ela aparecerá somente enquanto estivermos com o mouse sobre cada item do submenu:

#drop-down li ul a:hover {
background-image: url(...imagem do estado mouse hover...) !important;
}

Créditos: 10calco.blogspot.com
O resultado será semelhante ao mostrado na segunda imagem postada nesse artigo.
Note que foi declarado !important nas duas últimas partes do código, caso contrário ele não funcionará como previsto.

Caso seja necessário redimensionar alguma das imagens usadas veja Redimensionar imagens com CSS.