Помогите разобраться с бекграундом выпадающей менюшки, CSS

Question

Привет, есть выпадающее меню. 
При наведении курсора на первый пункт- он (пункт) меняет цвет на активный и из него выпадает подпункт. 
При наведении курсора на выпавший подпункт - пункт1 принимает стандартный (неактивный) цвет. 
Каким образом реализовать, чтобы цвет пункта1 оставался активным в то время, пока курсор находится на выпавших из него подпунктах? ? 
Ниже структура моего кода. 
Спасибо. 
 
#superfish-1 li a { 
background: red; 
} 
#superfish-1 li a:hover { 
background: green; 
} 
#main #superfish-1 li.sf-depth-2 a { 
background: red; 
} 
#main #superfish-1 li.sf-depth-2 a:hover { 
background: green; 
}

Наталья Соколова · Accepted Answer

:hover в этом случае надо ставить на родительский элемент. в данном случае - li
если вам нужен фон для элемента (можно его и для li сделать) , то так:

#superfish-1 li a, #superfish-1 li:hover li a {
/* "#superfish-1 li:hover li a" здесь - чтобы при наведении на родительский пункт меню не были активными подпункты в нем */
background: red;
}
#superfish-1 li:hover a, #superfish-1 li li:hover a {
background: green;
}

если нужна поддержка IE6, то нужно скрипт ставить для него. в IE6 :hover работает только для ссылок - т. е.