Проблема с субменю в шаблоне Versatility IV

Друзья, помогите с шаблоном Versatility IV. включен стиль moomenu для верхнего меню. но некоторые пункты в субменю состоят из нескольких слов. изначально длинные пукнты просто резались на 177 пикселях (ограничение в шаблоне). увеличил аж до 330 px, но не очень красиво - хочется, чтобы длинные пункты субменю просто отображало в 2 сточки с переносом слов. перерыл все что можно, но как сделать - не нашел . в веб-программировании не силен, вся надежда на вас.

 

да пробовал я его ставить, начитавшись один из топиков форумов буржуазных . ставил в менеджере меню, при создании пункта меню в его имени в середине. так вот это имя у меня так и отображалось в меню с тегом посередке (((. куда ж его вставить?
еще видел советы ставить pre-wrap в css, только вот к каком именно и где - ничего методом тыка не получилось (

 

Код (CODE):

1. /**
2.  * @version     1.5.4 August 20, 2010
3.  * @author      RocketTheme, LLC http://www.rockettheme.com
4.  * @copyright   Copyright (C) 2007 - 2010 RocketTheme, LLC
5.  * @license     http://www.rockettheme.com/legal/license.php RocketTheme Proprietary Use License
6.  */
7. .menutop,.menutop *{margin:0;padding:0;}
8. #horiznav{position:relative;z-index:1000;}
9. #horiz-menu{z-index:50;}
10. #horiz-menu li li{margin:0;}
11. .menutop{line-height:1.0;float:left;margin-bottom:1.5em;position:relative;}
12. .menutop ul{background:#fff;/*IE6 needs this*/
13. padding:0;}
14. .menutop li{float:left;list-style:none;position:relative;}
15. #horiz-menu li li a, #horiz-menu li.active li a, #horiz-menu li li .separator, #horiz-menu li.active li .separator {display:block;padding:0;margin:0;text-decoration:none;float:none;height:30px;line-height: 32px;text-indent:8px;width:98%;}
16. .menutop li ul{float:none;left:-999em;position:absolute;width:177px;z-index:500;}
17. .menutop li:hover ul, .menutop li.sfHover ul{left:0;top:42px;}
18. .menutop li:hover li ul, .menutop li.sfHover li ul, .menutop li li:hover li ul, .menutop li li.sfHover li ul, .menutop li li li:hover li ul, .menutop li li li.sfHover li ul{top:-999em;}
19. .menutop li li:hover ul, .menutop li li.sfHover ul, .menutop li li li:hover ul, .menutop li li li.sfHover ul, .menutop li li li li:hover ul, .menutop li li li li.sfHover ul{left:177px;top:0;}
20. .menutop li li{position:relative;float:none;width:100%;}
21. #horiz-menu .menutop li li.sfHover { background-image: none; }

 

не, это я не тот скопировал - это я сам пытался вставить перенос. в оригинале его не было вообще. я код переопубликовал через минуту оригинальный, но вы успели уже первоначальный проверить .

да, еще может и вот этот стиль нужен:

Код (CODE):

1. /**
2.  * @version     1.5.4 August 20, 2010
3.  * @author      RocketTheme, LLC http://www.rockettheme.com
4.  * @copyright   Copyright (C) 2007 - 2010 RocketTheme, LLC
5.  * @license     http://www.rockettheme.com/legal/license.php RocketTheme Proprietary Use License
6.  */
7. /* MenuStyle 3 */
8.  
9. #horiz-menu {display: block;height: 43px;line-height: 43px;padding: 0;background: url(../images/3-horiz-menu-bar.png) 0 0 repeat-x;}
10. ul#horiznav.menutop, #horiz-menu ul.menutop {padding: 0 6px;margin: 0;position: relative;z-index:120;}
11. #horiz-menu li {position:relative;z-index:150;}
12. #horiz-menu li a {margin-left: 5px;position:relative;z-index:200;}
13. #horiz-menu a, #horiz-menu .separator {white-space: nowrap;display: block;float: left;height: 43px;line-height: 43px;font-weight: normal;font-size: 120%;overflow: hidden;text-decoration: none;z-index: 100;cursor: pointer;padding: 0 10px 0 5px;margin-right: 5px;}
14. #horiz-menu li.active a, #horiz-menu li.active .separator {z-index: 100;cursor: pointer;height: 43px;}
15. #sub-menu {height: 32px;line-height: 32px;padding: 1px 0;display: block;z-index: 1;}
16. #submenu-container {background: url(../images/sub-menu-bar.png) 0 43px repeat-x;}
17. #sub-menu ul.menusub {padding: 0 8px;margin: 0;position: relative;height: 32px;z-index: 1;}
18. #sub-menu li a {margin-left: 5px;}
19. #sub-menu a, #sub-menu .separator {white-space: nowrap;display: block;float: left;height: 32px;line-height: 32px;font-size: 110%;overflow: hidden;text-decoration: none;z-index: 100;cursor: pointer;padding: 0 8px 0 3px;margin-right: 10px;}
20. #sub-menu ul.menusub li span {padding: 0;margin: 0;height: 32px;line-height: 32px;}

 

о, поставил кругом пре-врап, теперь пункты меню на середине слова не обрезает, а похоже что переносит, но все равно не видно 2 строчку (на которую перенесено то, что не влезло. до этого обрезало прямо посреди слов.

 

ой блин... я уже в истерике... если оставляем nowrap и ставим в длинном названии пункта меню <br>, который после сохранения становится <br /> - то этот пункт отображается в 2 строки с переносом только в меню менеджере . когда смотришь в денвере - в самом меню идут 2 слова, потом тупо <br /> и обрезанное посреди 3 слово...
если ставлю pre-wrap - то обрезанных слов нет, перенос делается. но куда - не видно, т.е. вторая строчка с невлезшими 3 и 4 словами не появляется...
если при этом поставить overflow: auto вместо hidden - появляется кругом прокрутка (выглядит преотвратно).
Пните меня пожалуйста, что подровнять в моих руках? ну и голове заодно... т.е. я думаю, что pre-wrap - это правильно, а вот что еще сделать, чтобы появилась вторая строчка у этого пункта меню при переносе?

 

так работает же pre-wrap. только не могу теперь увидеть ту часть (3 и 4 слова), которые перенесены. т.е. перенос отрабатывает по идее, но вторая строчка не появляется из-за каких-то других параметров в этом css. грешил на width, пробовал ставить ее в auto, мож не туда пихаю?

#horiz-menu a, #horiz-menu .separator {width: auto;white-space: pre-wrap;display: block;float: left;height: 43px;line-height: 43px;font-weight: normal;font-size: 120%;overflow: hidden;text-decoration: none;z-index: 100;cursor: pointer;padding: 0 10px 0 5px;margin-right: 5px;}
и еще тут:
#sub-menu a, #sub-menu .separator {width: auto;white-space: pre-wrap;display: block;float: left;height: 32px;line-height: 32px;font-size: 110%;overflow: hidden;text-decoration: none;z-index: 100;cursor: pointer;padding: 0 8px 0 3px;margin-right: 10px;}

 

Uploaded with ImageShack.us

Это по дефаулту (nowrap)



Uploaded with ImageShack.us

Это при исправлении на pre-wrap

исправлял в menustyle3. в rokmoomenu эти правки ничего не дают, вернул дефаултовые.

 

а исправить-то можно? как сделать по-людски? ну не шарю я, не веб-мастер... обычный ийтишник... ткните пожалуйста меня носом как котенка, что сделать и где... я итак за эти 2 дня пипец как продвинулся в веб-дизайне ))

 

(((. Я ж объяснил - сам не сделаю. все, что мог - уже попытался. сказывается полное отсутствие опыта. но в любом случае спасибо.

 

Видел и такие варианты, и тоже бы устроили. но аналогично - я не знаю как этого добиться. понимаю, что ширина должна быть какой-то плавающей, но вот что в css править... методом "научного тыка" ничерта не получается...
т.е. при инспекте вижу, что на меню выдает:
...
Блочная модель
width auto
height auto
....
но вот в каком css - не видно. наверное, не в них дело?