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

Тема в разделе "CSS, HTML, Web 2.0, верстка по web-стандартам", создана пользователем CB9T, 19.01.2013.

Статус темы:
Закрыта.
  1. CB9T
    Offline

    CB9T Преподаватель по J! Команда форума

    Регистрация:
    21.05.2010
    Сообщения:
    2 461
    Симпатии:
    303
    Пол:
    Мужской
    Собственно вопрос, как правильней всего сделать, чтобы при наведении было так:

    Пример:
    0_77bf3_1638150b_orig.png

    0_77bf4_58ccdcc1_orig.png
    ----------------------------------------------------------------------------------------------------------------------------------------
    0_77bf5_4e945505_orig.png

    Если же убрать:
    Код (PHP):
    1. gf-menu li.parent:hover {background: none repeat scroll 0 0 transparent;}


    0_77bf6_29de31fb_orig.png

    Приходится убирать цвет у:
    Код (PHP):
    1. .gf-menu.l1 > li > .item


    0_77bf7_70a375a_orig.png

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

    Если задать:
    Код (PHP):
    1. #rt-top-surround a:hover {color: #000 !important;}


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

    Собственно решил так:
    Код (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; }


    0_77bfd_562638a1_orig.png

    0_77bfe_e8e9cf40_orig.png

    0_77bff_3a58fafd_orig.png
     
    Последнее редактирование: 19.01.2013
  2.  
Статус темы:
Закрыта.

Поделиться этой страницей

Загрузка...