Ayuda con menú y background

[allvipdomains]

PROBLEMA:
Cuando estoy sobre (hover) "Section 1" me aparece el background de la imagen, pero al ponerme sobre "Section 1.1" desaparece el background de "Section 1" y me gustaría que se mantuviera visible tanto si estoy sobre la raíz o las subopciones.

Aquí os dejo los archivos... a ver si alguien puede echarme un cable que llevo dos días detrás de esto y no consigo averiguarlo.

Archivo CSS:

Código:

#menu{
	float:left;
	padding: 0 25px 0 0;
	}
#menu a:hover {
	background: #ccc;
	}
#menu ul {
	margin: 0;
	padding: 0;
	list-style-type: none;
	font: "Trebuchet MS", Arial, Helvetica, sans-serif;
	}
#menu ul li {
	width:158px;
	float:left;
	text-transform:uppercase;
	margin:2px;
	}
#menu ul li a {
	text-decoration: none;
	color: #000000;
	display: block;
	padding: 23px  1px 40px 1px;
	font-size:12px;
	font-weight:bold;
	}
#menu ul li a:hover{
	background: url(img/bg-menu.gif) no-repeat top center;
	color: #FFF;
	}
#menu ul li ul{
	display:none;
	float:left;
	background:#f5f5f5 url(img/bg-menu.gif) no-repeat top center;
	-moz-border-radius: 10px; 
	-webkit-border-radius: 10px;
	}
#menu ul li:hover ul{
	background:#f5f5f5;
	display:block;
	float:left;
	width:130px;
	margin: 0 0 0 14px;
	padding:10px 0;
	position:absolute;
	z-index:150
	}
#menu ul li ul li{
	width:130px;
	float:left;
	text-transform:uppercase;
	margin:0px 0 0 0;
	border-top:1px solid #eee;
	border-bottom:1px solid #eee;
	}
#menu ul li ul li a{
	background:#f5f5f5;
	font-size:10px;
	font-weight:normal;
	border-width: 0 0 0 0;
	padding: 5px  1px 5px 1px;
	}
#menu ul li ul li a:hover{
	background:#c01a00;
	}

Archivo PHP:

Código:

<div id="menu">
        <ul>
                <li><a href="#">Section 1</a>
                	<ul>
                    	<li><a href="#">Section 1.1</a></li>
                    </ul></li>
                <li><a href="#">Section 2</a></li>
                <li><a href="#">Section 3</a></li>
                <li><a href="#">Section 4</a></li>
                <li><a href="#">Section 5</a></li>
                <li><a href="#">Section 6</a></li>
        </ul>
</div>

[arawako]

Para hacer esto necesitarás javascript. Busca acerca de onmouseover, hay muchos ejemplos.