Выплывающее меню

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

  1. logon
    Offline

    logon Недавно здесь

    Регистрация:
    01.06.2010
    Сообщения:
    3
    Симпатии:
    0
    Пол:
    Мужской
    Доброго времени суток.

    У меня возникла проблема не как не могу реализовать выплывающее меню при наведении.

    Собственно вот сайт http://7v-toursb2b.msk.ru речь идёт о верхнем меню.
    Хочу реализовать чтобы при наведение на кнопку пример: Клиент за копейки выплывало снизу под категория.

    Вот ccs код отвечающий за меню:

    Код (CODE):
    1. /*-------------------------------------mainmenu---*/
    2.  
    3. /*-----------------content----*/
    4. .module_menu div{color:#fff; font-size:12px;}
    5. .module_menu ul { list-style:none; margin:0px 0px 0px 0px;}
    6. .module_menu li { line-height:14px !important; background:url(../images/main_menu_line.gif) bottom left repeat-x; padding:6px 0 9px 0;}
    7. .module_menu li ul {padding:8px 0px 2px 18px;}
    8. .module_menu li ul li{ background:none;  padding:2px 0 5px 0;}
    9. .module_menu li a {
    10.      background:url(../images/list_marker.gif) 5px 5px no-repeat;
    11.      padding:0px 0px 0 18px;
    12.     color:#13644D  !important;
    13.     display:block;
    14.     font:normal 12px/17px Tahoma;
    15.     text-decoration:none;
    16.      line-height:14px  !important;
    17. }
    18. .module_menu li a span {}
    19. .module_menu li a:hover {
    20.     color:#D5470C  !important;
    21.     text-decoration:none;
    22.     padding:0 0px 0 0;
    23.      line-height:14px;
    24.      padding:0px 0px 0 18px;
    25. }
    26. .module_menu li a:hover span {color:#D5470C !important; }
    27. .module_menu li.active a {color:#D5470C  !important; padding:0px 0px 0 18px; line-height:14px; }
    28.  
    29. /*-------------------------------------topmenu---*/
    30.  
    31. .row-top-menu ul.menu-nav {
    32. padding:0 0 0 0 !important;
    33. margin:0 0 0 0 !important;
    34.  
    35. }
    36. .row-top-menu ul.menu-nav li    {
    37.     display:block;
    38.     padding:0 0 0 0;
    39.     float:left;
    40.     margin:0 0 0 0;
    41.     background:url(../images/top_menu_separator.png) right 0 no-repeat;
    42.     _background:url(../images/top_menu_separator.gif) right 0 no-repeat;
    43.     padding:0 2px 0 0 !important;
    44.    
    45. }
    46. .row-top-menu ul.menu-nav li a  {
    47.     border:none;
    48.     text-decoration:none !important;
    49.     float:left;
    50.     padding:0 0 0 5px;
    51.     margin:0 0 0 0;
    52.     background:url(../images/top_meun_marker.png) right 10px no-repeat;
    53.     _background:url(../images/top_meun_marker.gif) right 10px no-repeat;
    54.    
    55.    
    56. }
    57. .row-top-menu ul.menu-nav li a span {
    58.     display:block;
    59.     padding:17px 66px 26px 7px;
    60.     _padding:14px 66px 26px 7px;
    61.     color:#000;
    62.     display:block;
    63.     font-size:13px;
    64.     text-decoration:none !important;
    65.     float:left;
    66.     font-weight:normal;
    67.     text-transform:uppercase;
    68. }
    69.  
    70. /*-------------------hover-active----*/
    71.  
    72. .row-top-menu  ul.menu-nav li a:hover  {
    73.     background:url(../images/top_menu_left.png) 0 0 no-repeat;
    74.     _background:url(../images/top_menu_left.gif) 0 0 no-repeat;
    75.     padding:0 0 0 5px;
    76. }
    77. .row-top-menu  ul.menu-nav li a:hover span  {
    78.     background:url(../images/top_menu_right.png) top right no-repeat;
    79.     _background:url(../images/top_menu_right.gif) top right no-repeat;
    80.     padding:22px 66px 20px 7px;
    81.     _padding:20px 66px 20px 7px;
    82.      color:#000;
    83. }
    84.  
    85. .row-top-menu  ul.menu-nav li.active a   {
    86.     background:url(../images/top_menu_left.png) 0 0 no-repeat;
    87.     _background:url(../images/top_menu_left.gif) 0 0 no-repeat;
    88.     padding:0 0 0 5px;
    89. }
    90. .row-top-menu  ul.menu-nav li.active a span {
    91.     background:url(../images/top_menu_right.png) top right no-repeat;
    92.     _background:url(../images/top_menu_right.gif) top right no-repeat;
    93.     padding:22px 66px 20px 7px;
    94.     _padding:20px 66px 20px 7px;
    95.      color:#000;
    96. }


    Долго тыкал пробывал но толку 0. Подскажите пожалуйста где что поменять надо поподробнее. Буду очень признателен.

    З.Ы.Нагуглил сотню форумов перепрочел но всё ровно не смог сделать.

    Заранее благодарен!
     
  2.  
  3. stranik
    Offline

    stranik специалист

    Регистрация:
    03.12.2008
    Сообщения:
    548
    Симпатии:
    36
    Пол:
    Мужской
    Включите показывать подпункты меню в настройках модуля меню
     
  4. logon
    Offline

    logon Недавно здесь

    Регистрация:
    01.06.2010
    Сообщения:
    3
    Симпатии:
    0
    Пол:
    Мужской
    Тогда меню будет показываться всегда, даже когда родительское меню не активно. А мне нужно чтобы при наведение мыши оно выплывало.:(
     
  5. stranik
    Offline

    stranik специалист

    Регистрация:
    03.12.2008
    Сообщения:
    548
    Симпатии:
    36
    Пол:
    Мужской
    Ну так правильно сначала дочерние пункты скрываеш например через css а для родителя назначаеш псевдо-класс :hover
    Пример как использую я (с одного из моих сайтов для maimenu c префексом для модуля _menu и стилем отображения - список + показывать подпункты) во вложение:
     

    Вложения:

    • ex.txt
      Размер файла:
      3.3 КБ
      Просмотров:
      20
    logon нравится это.
  6. logon
    Offline

    logon Недавно здесь

    Регистрация:
    01.06.2010
    Сообщения:
    3
    Симпатии:
    0
    Пол:
    Мужской
    Блин что то снова тыкал такал вообще не чего не выходит или вопще принаведение нечего не происходить либо всё как то криво отображется и не понятно что вообще выползает. (( ты не мог бы ткнуть нубу таком где да что надо подписать именно....я только новичок в css паэтому не чего толком не знаю, так основы и то мало ( Буду очень признателен.
     
  7. stranik
    Offline

    stranik специалист

    Регистрация:
    03.12.2008
    Сообщения:
    548
    Симпатии:
    36
    Пол:
    Мужской
    http://joomla15.ru/%D0%B2%D0%B5%D1%80%D1%82%D1%81%D0%BA%D0%B0/receips-makeup/57-3-level-ie-dropdown-menu.html
    http://joomla15.ru/%D0%B2%D0%B5%D1%80%D1%82%D1%81%D0%BA%D0%B0/%D0%BA%D0%BE%D0%BF%D0%B8%D0%BF%D0%B0%D1%81%D1%82%D1%8B/52-%D1%80%D0%B0%D1%81%D0%BA%D1%80%D1%8B%D0%B2%D0%B0%D1%8E%D1%89%D0%B5%D0%B5%D1%81%D1%8F-%D0%BC%D0%B5%D0%BD%D1%8E-joomla.html
    http://joomla15.ru/%D0%B2%D0%B5%D1%80%D1%82%D1%81%D0%BA%D0%B0/receips-makeup/69--joomla-15-css-21.html
     

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

Загрузка...