Помогите с меню шаблона от YT

[mif2008]

На сайте используются очень длинные названия меню, помогите как разбить его на несколько строчек. У меня такая проблема в 90% шаблонах уже намучился.  Например раздел Юридическое обслуживание организаций и ИП. Название сливается в одну массу.  Сократить названия не как нельзя.
вот код

Код:

/* Copyright (C) 2007 - 2011 YOOtheme GmbH, YOOtheme Proprietary Use License (http://www.yootheme.com/license) */

/*
 * topmenu
 */

 
div#topmenu ul {
margin: 0px;
padding: 0px;
list-style: none;
float: left; 
}

div#topmenu li {
margin: 0px;
padding: 0px;
float: left;
display: block;
}

div#topmenu li a {
display: block;
height: 25px;
padding: 0px 10px 0px 10px;
background: url(../images/topmenu_item_bg.png) 0 8px no-repeat;
float: left;
overflow: hidden; 
text-decoration: none;
}

div#topmenu li.item1 a {
padding: 0px 10px 0px 0px;
background: none;
}

div#topmenu a:link, div#topmenu a:visited {
color: #ffffff;
}

div#topmenu a:hover {
color: #ffffff;
text-decoration: underline;
}

/*
 * menu
 */

 
div#menu ul {
margin: 0px;
padding: 0px;
list-style: none;
float: left; 
}

div#menu li {
position: relative;
margin: 0px;
padding: 0px;
display: block;
float: left;
z-index: 5; 
}

div#menu li a, #menu li span.separator {
height: 45px;
display: block;
float: left;
line-height: 32px;
text-decoration: none;
color: #323232;
}

div#menu li span { 
display: block;
cursor: pointer;
background-repeat: no-repeat; 
background-position: 95% 0px; 
}

div#menu li a.current { 
}

div#menu a:hover,
div#menu span.separator:hover,
div#menu span.hovered { 
/* color: #000000; */
}

div#menu a.active, div#menu span.active { 
}

div#menu li.parent span.separator { 
cursor: pointer;
}

 
div#menu ul.menu {
}

div#menu li.level1 {
padding: 0px 10px 0px 20px;
background: url(../images/menu_level1_item_l.png) 0 0 no-repeat;
}

div#menu a.level1, div#menu span.level1 {
background: url(../images/menu_level1_item_r.png) 100% 0 no-repeat;
padding: 0px 23px 0px 0px;
font-size: 180%;
letter-spacing: -1px;
line-height: 180%;
}

div#menu li.active a.level1 {   
}

div#menu a.level1 span, div#menu span.level1 span {
}

 
div#menu a.level1 span.title, div#menu span.level1 span.title{
padding: 0px;
font-size: 90%;
line-height: 140%;
}

 
div#menu a.level1 span.subtitle, div#menu span.level1 span.subtitle {
margin-top: -3px;
padding: 0px 0px 0px 0px;
background: none;
font-size: 50%;
font-weight: normal;
color: #323232;
line-height: 10px;
letter-spacing: 0px;
}

 
div#menu li.fancy {
position: absolute;
top: 0px;
visibility: hidden;
z-index: 4;
overflow: hidden;
}

div#menu li.fancy div.fancy-1 {
}

div#menu li.fancy div.fancy-2 {
padding: 0px 13px 0px 0px;
}

div#menu li.fancy div.fancy-3 {
height: 52px;
background: url(../images/menu_fancy_bg.png) 50% 0 no-repeat;
}

 
div#menu ul.menu ul {
position: absolute;
top: 45px;
left: -999em; 
width: 165px;
padding: 0px 0px 15px 0px;
background: url(../images/menu_dropdown_bg.png) 0 100% no-repeat;
}

div#menu li:hover ul, div#menu li.hovered ul {
left: 0px; 
z-index: 100;
}

div#menu li.level1 li {
    width: 100%; 
text-indent: 15px;
}

div#menu li.level1 li.first {
padding-top: 15px;
    background: url(../images/menu_level2_item_first.png) 0 0 no-repeat;
}

div#menu li.level1 li a, div#menu li.level1 li span.separator {
height: 25px;
padding: 0px;
margin: 0px 1px 0px 1px;
background: none;
float: none; 
display: block;
line-height: 25px;
}

div#menu li.level2 a.parent, div#menu li li.level2 span.parent { 
background: url(../images/menu_level2_item_parent.png) 100% 0 no-repeat;
}

div#menu li.level2 a.active, div#menu li.level2 span.active { 
}

div#menu li.level2 a:hover,
div#menu li.level2 span.separator:hover,
div#menu li.level2 span.hovered { 
background: url(../images/menu_level2_item_hover.png) 0 0 no-repeat;
}

div#menu li.level2 a.parent:hover,
div#menu li.level2 span.parent:hover,
div#menu li.level2 span.hovered { 
background: url(../images/menu_level2_item_parent_hover.png) 0 0 no-repeat;
}

 

 
div#menu li ul ul {
margin: -48px 0 0 163px; 
}

div#menu li li.first ul { /* only for first */
margin: -33px 0 0 163px; 
}

div#menu li ul.level2 ul ul {
margin: -48px 0 0 163px; 
}

div#menu li li.level2 li.first ul { /* only for first */
margin: -45px 0 0 163px; 
}

div#menu li:hover ul ul, div#menu li.hovered ul ul {
border-top: none;
}

div#menu li.level2 li.first {
padding-top: 3px;
background: none;
}

 
div#menu li:hover ul ul, div#menu li.hovered ul ul, 
div#menu li:hover ul ul ul, div#menu li.hovered ul ul ul, 
div#menu li:hover ul ul ul ul, div#menu li.hovered ul ul ul ul { 
left: -999em;
}

 
div#menu li li:hover ul, div#menu li li.hovered ul, 
div#menu li li li:hover ul, div#menu li li li.hovered ul, 
div#menu li li li li:hover ul, div#menu li li li li.hovered ul { 
left: 0;
z-index: 100;
}


/*
 * sub menu
 */
 
 
div#middle div.mod-menu div.module ul,
div#middle div.mod-menu div.module ul {
margin: 0px;
padding: 0px;
overflow: hidden;
list-style: none;
}

div#middle ul.menu li {
margin: 0px;
padding: 0px;
display: block;
}

div#middle ul.menu a, div#middle ul.menu span.separator {
height: 25px;
background: url(../images/submenu_l_item.png) 0 0 no-repeat;
display: block;
line-height: 25px;
text-decoration: none;
color: #323232;
}

div#right ul.menu a, div#right ul.menu span.separator { 
background: none;
color: #323232;
}

div#middle ul.menu li span { 
display: block;
background-repeat: no-repeat; 
background-position: 95% 0px; 
}

div#middle ul.menu a.current { 
font-weight: bold;
}

div#middle ul.menu a:hover,
div#middle ul.menu span.separator:hover,
div#middle ul.menu span.hovered { 
/* color: #ff0000; */
}

div#middle ul.menu a.active, div#middle ul.menu span.active { 
/*color: #ffffff;*/
}

div#middle ul.menu li.parent span.separator { 
cursor: pointer;
}

div#middle ul.menu a.parent, div#middle ul.menu span.parent { 
background: url(../images/submenu_l_item_parent.png) 0 0 no-repeat;
}

div#right ul.menu a.parent, div#right ul.menu span.parent { 
background: url(../images/submenu_r_item_parent.png) 0 0 no-repeat;
}

 
div#middle ul.menu li.level1 {
}

div#middle ul.menu a.level1, div#middle ul.menu span.level1 {
text-indent: 5px;
}

 
div#middle ul.menu li.level2 {
background: url(../images/submenu_level2_item.png) 5px 0px no-repeat;
}

div#middle ul.menu a.level2 {
text-indent: 20px;
}

div#middle ul.menu a.level2 span {
}

 
div#middle ul.menu li.level3 {
background: url(../images/submenu_level2_item.png) 15px 0px no-repeat;
}

div#middle ul.menu a.level3 {
text-indent: 30px;
}

div#middle ul.menu a.level3 span {
}

 
div#middle ul.menu li.level4 {
background: url(../images/submenu_level2_item.png) 25px 0px no-repeat;
}

div#middle ul.menu a.level4  {
text-indent: 40px;
}

div#middle ul.menu a.level4 span {
}

[_ib_]

шаблон приобрели легальным путём?

[mif2008]

Сайт будет использоваться в коммерческих целях для юридической компании и шаблон будет куплен в обязательном порядке после того как  все будет работать на локальном сервере. В данный момент у 100% шаблонов YT одна и также проблема с меню как и с аккордеоном так и с верхнем меню с боковым аккордеонам проблему решил заменив и доработав модуль с верхнем меню так не получается. Выкидывать деньги на шаблон который может придется выкинуть не как не хочется.  Хотел бы уточнить а какое это имеет отношение.

[mif2008]

шаблон приобрели легальным путём?

Разобрался к чему был задан вопрос. Мне интересно приобрести легальный шаблон по более низкой цене но пока как я описал выше не имеет смысла.

[_ib_]

в CSS  есть WORD-WRAP, для переноса длинных фраз на новую строчку например.

Но использовать "очень длинные названия меню, с неимеющими значения словами"  также не совсем дружелюблю для пользователя.

[mif2008]

в CSS  есть WORD-WRAP, для переноса длинных фраз на новую строчку например.

Но использовать "очень длинные названия меню, с неимеющими значения словами"  также не совсем дружелюблю для пользователя.

Попытаюсь еще посмотреть. Почему не имеющие значения все названия имеют значения но их не как не сократить иначе они потеряют смысл. От того и головная боль =((

[_ib_]

зы: "Юридическое обслуживание организаций и ИП" для меня это всё "услуги".

[mif2008]

зы: "Юридическое обслуживание организаций и ИП" для меня это всё "услуги".

Да так и есть и этот раздел как и многие другие с аналогичными названиями находится в разделе услуги.
Боковое меню:
Услуги

Юридическое обслуживание организаций и ИП
…………….. Арбитраж, суды
…………….. Абонентское обслуживание
…………….. Обслуживание ТСЖ, ЖСК
……………..Создание и ликвидация предприятий и ИП
Бухгалтерское обслуживание
………………Абонентское обслуживание
……………..Подача квартальной и годовой отчетности
……………..Оптимизация налогообложения
Примерно так выглядит боковое меню “УСЛУГИ”
Как раз оно отображается нормально а верхнее при наведение на раздел услуги не умещает в себе эти названия и они сливаются в непонятную кучу.

[_ib_]

Услуги

Юридические
…………….. Арбитраж, суды
…………….. Абонентское обслуживание
…………….. Обслуживание ТСЖ, ЖСК
……………..Создание и ликвидация предприятий и ИП

Бухгалтерские
………………Абонентское обслуживание
……………..Подача квартальной и годовой отчетности
……………..Оптимизация налогообложения

[mif2008]

Услуги

Юридические
…………….. Арбитраж, суды
…………….. Абонентское обслуживание
…………….. Обслуживание ТСЖ, ЖСК
……………..Создание и ликвидация предприятий и ИП

Бухгалтерские
………………Абонентское обслуживание
……………..Подача квартальной и годовой отчетности
……………..Оптимизация налогообложения

Было бы так просто. а что делать с подпунктами

Подача квартальной и годовой отчетности
Создание и ликвидация предприятий и ИП

Да на самом деле много таких это еще не самые худшие варианты

[mif2008]

Да и навигацию мне надо оставить туже так как поменяв её повлияет на продвижение а позиция сайта приличные. Одно дело просто переименовать а тут нужно контент делить на подрубрики и +