menu dropdown orizzontale su 3 livelli. Evidenziare la voce generale

[lorenzo84]

Buongiorno a tutti.

Ho questo codice che sto cercando di modificare. Siccome la fascia del menù è blu ma l'interno poi è bianco ho modificato dli hover e il risultato va bene. Il problema è che la voce generale me la evidenzia bianco quando sono sopra ma quando mi sposto nelle relative voci del sottomenù ritorna blu e invece dovrebbe essere bianca.
Questo è il codice:

#menu-pr {
    margin:0 auto;
    padding:0;
    width:960px;
}
 
ul#menu {
    margin:5px 0 0;
    padding:0;
    list-style:none;
    float:left;
    width:960px;
    background-color:#3B5998;
    font-size:14px;
}
 
ul#menu li {
    margin:0;
    padding:0;
    float:left;
    display:block;
    /*border-right:1px solid #222;*/
    position:relative;
}
 
ul#menu li a {
    float:left;
    padding:12px 30px;
    color:#fff;

    text-decoration:none;
}
 
ul#menu li a:hover {
    background-color:#FFF;
    color:#3B5998;
}
 
/* sottomenu */

ul#menu ul{
    margin:0px 0 0;
    padding:0;
    display:inline-block;
    list-style:none;
    opacity:0;
    visibility:hidden;
    position:absolute;
    top:43px;
    left:0;
    z-index:9999;
    background:#fff;
	width:158px;
}
 
ul#menu li:hover > ul {
    opacity:1;
    visibility:visible;
	
}
 
ul#menu ul li {
    float:none;
    display:block;
    border:0;
	
}
 
ul#menu ul a {
   /* padding:10px;*/
    width:158px;
    display:block;
    white-space:nowrap;
    float:none;
	color:#3B5998;
	height:38px;
	line-height:38px;
	vertical-align:top;
    text-transform:none;
}
 
ul#menu ul a:hover {
    background-color:#ea9c99;
    color:#fff;
}
 
/* menu terzo livello */
 
ul#menu ul ul {
    top:0;
    left:150px;
    margin:0;
}

Questo è html

<nav id="menu-pr">
   <ul id="menu">
     <li class="current"><a href="#">home</a></li>
     <li><a href="#">Prodotti e Prezzi</a>
        <ul>
            <li><a href="#">prodotto1</a>
                <ul>
                    <li><a href="#">Portfolio</a></li>
                    <li><a href="#">WordPress Themes</a></li>
                    <li><a href="#">Wallpapers</a></li>
                    <li><a href="#">Illustrator Tutorials</a></li>
                </ul>
            </li>
            <li><a href="#">Web Designer Wall</a>
                <ul>
                    <li><a href="#">Design Job Wall</a></li>
                </ul>
            </li>
            <li><a href="#">IconDock</a></li>
            <li><a href="#">Best Web Gallery</a></li>
        </ul>
    </li>
    <li><a href="#">Multi-Levels</a>
        <ul>
            <li><a href="#">Team</a>
                <ul>
                    <li><a href="#">Sub-Level Item</a></li>
                    <li><a href="#">Sub-Level Item</a>
                        <ul>
                            <li><a href="#">Sub-Level Item</a></li>
                            <li><a href="#">Sub-Level Item</a></li>
                            <li><a href="#">Sub-Level Item</a></li>
                        </ul>
                    </li>
 
                    <li><a href="#">Sub-Level Item</a></li>
                </ul>
            </li>
            <li><a href="#">Sales</a></li>
            <li><a href="#">Another Link</a></li>
            <li><a href="#">Department</a>
                <ul>
                    <li><a href="#">Sub-Level Item</a></li>
                    <li><a href="#">Sub-Level Item</a></li>
                    <li><a href="#">Sub-Level Item</a></li>
                </ul>
            </li>
        </ul>
    </li> 
    <li><a href="#">About</a></li>
    <li><a href="#">Contact Us</a></li>
</ul>
</nav>

qualcuno mi aiuta?