Проблема с меню при hover

Собственно вопрос, как правильней всего сделать, чтобы при наведении было так:

Пример:



----------------------------------------------------------------------------------------------------------------------------------------


Если же убрать:

Код (PHP):

1. gf-menu li.parent:hover {background: none repeat scroll 0 0 transparent;}

Приходится убирать цвет у:

Код (PHP):

1. .gf-menu.l1 > li > .item

Выглядит все ужасно... т.к. у остальных пропадает цвет.

Если задать:

Код (PHP):

1. #rt-top-surround a:hover {color: #000 !important;}

То при наведении все хорошо (фон можно подправить см. выше) - но когда ухожу на внутренние все заново становится, то и понятно...


Собственно решил так:

Код (PHP):

1. .gf-menu a.item {text-shadow: none !important;
2.  color: #155488;}
3.  
4. .gf-menu.l1 > li > .item {color: #FFF; /* цвет всего */
5.     font-family: 'Open Sans Condensed', sans-serif !important;
6. text-transform: uppercase;
7.  
8. }
9.  .gf-menu.l1 > li  {
10.  background-color: transparent !important; 
11. border: none !important;
12. color: #FFF;
13.  
14.  }
15. .gf-menu li.parent:hover {border: none !important;
16. border-radius: 0px !important;
17. background-color: #FFF !important;
18. box-shadow: none !important;
19. -webkit-border-radius: 10px 10px 0px 0px !important;
20. border-radius: 10px 10px 0px 0px !important;
21. background-position: 50% 20% !important;
22. background-attachment: fixed !important;
23.  
24. }
25.  
26. .gf-menu.l1 > li.active {
27.     background: #FFF !important;
28.     border: none !important;
29.     border-radius: 0px !important;
30.     box-shadow: none !important;
31.    
32. }
33. .gf-menu.l1 > li.active > .item {color: #155488;}
34. .gf-menu li:hover  {
35. padding-top: 0px !important; box-shadow: none !important; }