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

Discussion in 'CSS, HTML, Web 2.0, верстка по web-стандартам' started by logon, Jun 8, 2010.

  1. logon
    Offline

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

    Joined:
    Jun 1, 2010
    Messages:
    3
    Likes Received:
    0
    Gender:
    Male
    Доброго времени суток.

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

    Собственно вот сайт 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 Недавно здесь => Cпециалист <=

    Joined:
    Dec 3, 2008
    Messages:
    548
    Likes Received:
    36
    Gender:
    Male
    Включите показывать подпункты меню в настройках модуля меню
     
  4. logon
    Offline

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

    Joined:
    Jun 1, 2010
    Messages:
    3
    Likes Received:
    0
    Gender:
    Male
    Тогда меню будет показываться всегда, даже когда родительское меню не активно. А мне нужно чтобы при наведение мыши оно выплывало.:(
     
  5. stranik
    Offline

    stranik Недавно здесь => Cпециалист <=

    Joined:
    Dec 3, 2008
    Messages:
    548
    Likes Received:
    36
    Gender:
    Male
    Ну так правильно сначала дочерние пункты скрываеш например через css а для родителя назначаеш псевдо-класс :hover
    Пример как использую я (с одного из моих сайтов для maimenu c префексом для модуля _menu и стилем отображения - список + показывать подпункты) во вложение:
     

    Attached Files:

    • ex.txt
      File size:
      3.3 KB
      Views:
      20
    logon likes this.
  6. logon
    Offline

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

    Joined:
    Jun 1, 2010
    Messages:
    3
    Likes Received:
    0
    Gender:
    Male
    Блин что то снова тыкал такал вообще не чего не выходит или вопще принаведение нечего не происходить либо всё как то криво отображется и не понятно что вообще выползает. (( ты не мог бы ткнуть нубу таком где да что надо подписать именно....я только новичок в css паэтому не чего толком не знаю, так основы и то мало ( Буду очень признателен.
     
  7. stranik
    Offline

    stranik Недавно здесь => Cпециалист <=

    Joined:
    Dec 3, 2008
    Messages:
    548
    Likes Received:
    36
    Gender:
    Male
    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
     

Share This Page

Loading...