Submenú con esquinas redondeadas

[SBeto]

Hola a todos. Estoy montando una plantilla y me he encontrado con un problema que me trae de cabeza y me gustaría resolver. Tengo un menú horizontal en el header que se despliega en vertical:

Código:

<div id="header">
	<jdoc:include type="modules" name="top"/>
</div>

El submenú que se despliega tiene un gráfico de fondo de altura suficiente para adaptarse a las subopciones que haya y que queda cortado por la parte superior. Este gráfico tiene las esquinas de abajo redondeadas:

Código:

.artmenu > li:hover ul {
	background-position: left bottom;
	background-repeat: no-repeat;
	background-image: url('../images/submenubg.png');
	padding: 0 0 10px 0; 
	margin: 0;
	z-index: 5000;
}

Me gustaría saber si hay alguna manera de poner otra imagen en el fondo del submenú de manera que remate la parte superior también con esquinas redondeadas, si es posible evitando el uso de librerías javascript, únicamente con css. Muchas gracias de antemano y un saludo.

[mrsorpresa]

¿Podrías poner un enlace al sitio, o una captura de pantalla?

[Larenz]

Crea una imagen redondeada y reemplaza la vieja imagen por la nueva. O simplemente llama a la nueva imagen:

Código:

.artmenu > li:hover ul {
	background-position: left bottom;
	background-repeat: no-repeat;
	background-image: url('../images/NUEVAIMAGEN.png');
	padding: 0 0 10px 0; 
	margin: 0;
	z-index: 5000;
}

[SBeto]

Gracias por la ayuda pero al final logré resolverlo gracias a la pseudo-clase first-child, de manera que al primer elemento de cada submenú le pongo de fondo la imagen que remata la parte superior con las esquinas redondeadas. De esta manera tengo un submenú con una imagen de fondo que se adapta en altura a las opciones que haya. La imagen que permite la altura variable queda definida tal y como la había hecho en principio:

Código:

.artmenu > li:hover ul {
	background-position: bottom left;
	background-repeat: no-repeat;
	background-image: url('../images/ddbg.png');
	padding: 0 0 10px 0; /*los 10px son el hueco para el remate superior*/
	margin: 0 0 0 0;
	z-index: 5000;
	display: inline;	
}

Y el remate de la parte superior queda definido como sigue:

Código:

.artmenu ul li:first-child {
	background-image: url('../images/submenubg_top.png');
	background-repeat: no-repeat;
	background-position: top left;
	margin: -10px 0 0 0; /*los 10px son la altura de la imagen*/
	padding-top: 10px; /*los 10px son la altura de la imagen*/
}

Gracias y un saludo