Joomla 2.5 Выпадающее меню, пункты переносятся по строкам

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

  1. qwe88
    Offline

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

    Регистрация:
    25.07.2008
    Сообщения:
    281
    Симпатии:
    1
    Пол:
    Мужской
    Добрый день!
    Подскажите, пожалуйста, как сделать так, что бы пункты меню переносились на сроки, если не вмещаются.
    _http://spb-stroyfirm.ru/ - в пункте "Отделка и ремонт" подпункт не вмещается и не переносится на следующую строку
     
  2.  
  3. shurikkan
    Offline

    shurikkan Russian Joomla! Team Команда форума

    Регистрация:
    01.09.2011
    Сообщения:
    1 856
    Симпатии:
    162
    Пол:
    Мужской
    ну например:

    template.css (строка 387)

    убрать white-space: nowrap;

    template.css (строка 378)

    добавить max-width: ... px;
     
  4. qwe88
    Offline

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

    Регистрация:
    25.07.2008
    Сообщения:
    281
    Симпатии:
    1
    Пол:
    Мужской
    В подпункт добавил white-space:normal; - помогло. Вот только когда добавил второй подпункт, проблема опять началась. Помогите, пожалуйста
     
  5. qwe88
    Offline

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

    Регистрация:
    25.07.2008
    Сообщения:
    281
    Симпатии:
    1
    Пол:
    Мужской
    Вопрос полностью решен. В итоге получился такой код меню:
    Код (CODE):
    1. .menu_my ul{
    2. white-space:normal;
    3. visibility:hidden;/*прячем список*/
    4. position:absolute;/*абсолютное позиционирование. В данном случае, вложенный список будет позиционироваться относительно родителя(Елемента списка li , для которого мы задавали position:relative)*/
    5. top:32px;/*координата по вертикали(отступ сверху)  равен высоте нашего главного списка*/
    6. left:-40px;/*координата по горизонтали(отступ слева)*/
    7. }
    8.  
    9. .menu_my ul li a:link{
    10. white-space:normal;
    11. line-height: 21px;
    12. border-top: solid #fff 1px;
    13. background:none;
    14. background-color:#000000;
    15. width: 170px;
    16. padding: 3px;
    17. }
    18.  
    19. .menu_my ul li a:hover{
    20. background:none;
    21. background-color: #50A5CF;
    22. }
    23.  
    24. .menu_my ul a{
    25. border:0; /*обнуляем рамку, унаследованную от стиля #nav a */
    26. }
    27.  
    28. .menu_my li:hover ul, .menu_my li.jshover ul{visibility:visible;} /*показывам список*/
    29.  
    30. .menu_my li:hover li ul, .menu_my li.jshover li ul{
    31. visibility:hidden; /*скрываем список*/
    32. float:left;
    33. left: 138px;
    34. top: 0px;
    35. }
    36.  
    37. .menu_my li:hover li:hover ul, .menu_my li.jshover li.jshover ul{
    38. visibility:visible; /*показываем список*/
    39. }
     

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

Загрузка...