Как в меню перенести текст на вторую строчку

имеется шаблончик mellow от yootheme http://aitest-ru.1gb.ru/
Если имя менюшки превышает ее длинну текст переносится на сл строку поверх уже следующей кнопки меню. Но это можно понять, там под кнопкой картинка. НО в так называемом меню ACCORDION A (справа внизу) оно типа раздвижное меню картинок на фоне нет, и таже самая проблема, текст вылезает на вторую строчку перекрывая строочку снизу, подскажите пожалуйста как сделать чтобы строчки меню нормально двигалось.

строчка этого меню из браузера

Код (CODE):

1. <ul class="accordion level2">
2. <li class="level2 item1 first"><a href=""><span class="bg">Это длинный текст который залазит на вторую строчку</span></a></li>
3. <li class="level2 item2"><a href="" class="level2 item2"><span class="bg">Бедная вторая перекрытая строчка</span></a></li>

css

Код (CODE):

1. /* Copyright (C) 2007 - 2011 YOOtheme GmbH, YOOtheme Proprietary Use License (http://www.yootheme.com/license) */
2.  
3. /*
4.  * top and footer menu
5.  */
6.  
7.  
8. #toolbar ul.menu,
9. #footer ul.menu {
10.     display: inline-block;
11.     margin: 0px;
12.     padding: 0px;
13.     list-style: none;
14. }
15.  
16. #footer ul.menu {
17.     display: block;
18.     line-height: 14px;
19. }
20.  
21. #toolbar .menu li,
22. #footer .menu li {
23.     display: inline-block;
24.     margin: 0px;
25.     padding: 0px;
26. }
27.  
28. #toolbar .menu li a,
29. #footer .menu li a {
30.     display: inline-block;
31.     padding: 0px 10px 0px 10px;
32.     background: url(../images/topmenu_item_bg.png) 0 50% no-repeat;
33.     overflow: hidden;  
34. }
35.  
36. #toolbar .menu a.first,
37. #footer .menu a.first {
38.     padding: 0px 10px 0px 0px;
39.     background: none;
40. }
41.  
42. #toolbar .menu a.last,
43. #footer .menu a.last { padding: 0px 0px 0px 10px; }
44.  
45. #toolbar .menu a:link,
46. #toolbar .menu a:visited { color: #646464; }
47. #toolbar .menu a:hover { color: #000000; }
48.  
49. #footer .menu a:link,
50. #footer .menu a:visited { color: #db4d0a; }
51. #footer .menu a:hover { color: #6d9701; }
52.  
53. /*
54.  * menu
55.  */
56.  
57.  
58. #menu ul {
59.     margin: 0px;
60.     padding: 0px;
61.     list-style: none;
62. }
63.  
64. #menu li {
65.     position: relative;
66.     z-index: 5;  
67.     margin: 0px;
68.     padding: 0px;
69. }
70.  
71. #menu a,
72. #menu span { display: block; }
73. #menu a { text-decoration: none; }
74.  
75.  
76. #menu span.icon {
77.     background-repeat: no-repeat;
78.     background-position: 0 50%;
79. }
80.  
81.  
82. #menu ul.menu { float: left; }
83.  
84. #menu li.level1 {
85.     margin-right: 8px;
86.     background: url(../images/menu_level1_item.png) 100% -70px no-repeat;
87.     float: left;
88. }
89.  
90. #menu a.level1,
91. #menu span.level1 {
92.     padding: 0px 5px 8px 5px;
93.     background: url(../images/menu_level1_item.png) 0 0 no-repeat;
94.     float: left;
95. }
96.  
97. #menu a.level1 span.bg,
98. #menu span.level1 span.bg {
99.     height: 45px;
100.     padding: 0px 10px 0px 10px;
101.     background: #535251;
102.     float: left;
103.     line-height: 43px;
104.     font-size: 18px;
105.     color: #ffffff;
106.     text-transform: uppercase;
107. }
108.  
109.  
110. #menu li.active { background-position: 100% -210px; }
111.  
112. #menu li.active a.level1,
113. #menu li.active span.level1 { background-position: 0 -140px; }
114.  
115. #menu li.active a.level1 span.bg,
116. #menu li.active span.level1 span.bg { background: #FA641E; }
117.  
118.  
119. #menu li.level1:hover { background-position: 100% -350px; }
120.  
121. #menu li:hover a.level1,
122. #menu li:hover span.level1 { background-position: 0 -280px; }
123.  
124. #menu li:hover a.level1 span.bg,
125. #menu li:hover span.level1 span.bg { background: #82B400; }
126.  
127.  
128. #menu li.remain { background-position: 100% -350px; }
129. #menu li.remain a.level1,
130. #menu li.remain span.level1 { background-position: 0 -280px; }
131. #menu li.remain a.level1 span.bg,
132. #menu li.remain span.level1 span.bg { background: #82B400; }
133.  
134.  
135. #menu li.first a.level1,
136. #menu li.first span.level1 {
137.     padding-bottom: 20px;
138.     background-position: 0 -420px;
139. }
140.  
141. #menu li.first a.active,
142. #menu li.first span.active { background-position: 0 -490px; }
143.  
144. #menu li.first:hover a.level1,
145. #menu li.first:hover span.level1 { background-position: 0 -560px; }
146. #menu li.remain a.first,
147. #menu li.remain span.first { background-position: 0 -560px; }
148.  
149.  
150. #menu a.level1 span.title,
151. #menu span.level1 span.title {
152.     font-size: 17px;
153.     line-height: 33px;
154. }
155.  
156.  
157. #menu a.level1 span.subtitle,
158. #menu span.level1 span.subtitle {
159.     margin-top: -7px;
160.     font-size: 9px;
161.     font-weight: normal;
162.     line-height: 10px;
163.     letter-spacing: 0px;
164. }
165.  
166.  
167. #menu .dropdown {
168.     position: absolute;
169.     top: 53px;
170.     left: -999em;  
171.     z-index: 100;
172.      
173. }
174.  
175. #menu li:hover .dropdown,
176. #menu li.remain .dropdown { left: 0px; }
177.  
178. #menu .dropdown-t1 { background: url(../images/menu_dropdown_corners.png) 0 0 no-repeat; }
179.  
180. #menu .dropdown-t2 {
181.     padding: 0px 5px 0px 5px;
182.     background: url(../images/menu_dropdown_corners.png) 100% -10px no-repeat;
183. }
184.  
185. #menu .dropdown-t3 {
186.     height: 5px;
187.     background: #2B2A29;
188. }
189.  
190. #menu .dropdown-1 {}
191. #menu .dropdown-2 { overflow: hidden; }
192.  
193. #menu .dropdown-3 {
194.     padding: 0px 5px 0px 5px;
195.     background: #2B2A29;
196.     overflow: hidden;
197. }
198.  
199. #menu .dropdown-b1 { background: url(../images/menu_dropdown_corners.png) 0 -20px no-repeat; }
200.  
201. #menu .dropdown-b2 {
202.     padding: 0px 5px 0px 5px;
203.     background: url(../images/menu_dropdown_corners.png) 100% -30px no-repeat;
204. }
205.  
206. #menu .dropdown-b3 {
207.     height: 5px;
208.     background: #2B2A29;
209. }
210.  
211. #menu li.level2 { margin-bottom: 5px; }
212. #menu li.level1 li.last { margin-bottom: 0px; }
213.  
214. #menu .group-box1 { background: #535251; }
215. #menu .group-box2 { background: url(../images/menu_level2_group_corners.png) 0 0 no-repeat; }
216. #menu .group-box3 { background: url(../images/menu_level2_group_corners.png) 100% 0 no-repeat; }
217. #menu .group-box4 { background: url(../images/menu_level2_group_corners.png) 0 100% no-repeat; }
218. #menu .group-box5 {
219.     background: url(../images/menu_level2_group_corners.png) 100% 100% no-repeat;
220.     overflow: hidden;
221. }
222.  
223. #menu .hover-box4 {
224.     overflow: hidden;
225. }
226.  
227.  
228. #menu li.level1 li.parent .hover-box1 {
229.     width: 55%;
230.     float: left;
231. }
232.  
233.  
234. #menu .hover-box1 { background: url(../images/menu_level2_group_corners.png) 0 0 no-repeat; }
235. #menu .hover-box1 .hover-box2 { background: url(../images/menu_level2_group_corners.png) 100% 0 no-repeat; }
236. #menu .hover-box1 .hover-box3 { background: url(../images/menu_level2_group_corners.png) 0 100% no-repeat; }
237. #menu .hover-box1 .hover-box4 { background: url(../images/menu_level2_group_corners.png) 100% 100% no-repeat; }
238.  
239. #menu li li.parent .hover-box1 .hover-box2 { background: none; }
240. #menu li li.parent .hover-box1 .hover-box4 { background: none; }
241.  
242. #menu ul.level2 li.separator .hover-box1,
243. #menu ul.level2 li.separator .hover-box1 .hover-box2,
244. #menu ul.level2 li.separator .hover-box1 .hover-box3,
245. #menu ul.level2 li.separator .hover-box1 .hover-box4 { background: none; }
246.  
247. #menu a.level2 span.bg,
248. #menu span.level2 span.bg {
249.     height: 45px;
250.     line-height: 45px;
251.     text-indent: 10px;
252.     color: #ffffff;
253.     font-size: 14px;
254. }
255.  
256. #menu a.level2 span.icon,
257. #menu span.level2 span.icon {
258.     text-indent: 50px;
259. }
260.  
261.  
262. #menu li.level2 a.current span.bg { font-weight: bold; }
263.  
264.  
265. #menu a.level2 span.title, #menu span.level2 span.title {
266.     line-height: 33px;
267. }
268.  
269.  
270. #menu a.level2 span.subtitle, #menu span.level2 span.subtitle {
271.     margin-top: -8px;
272.     font-size: 10px;
273.     font-weight: normal;
274.     line-height: 10px;
275.     text-transform: none;
276.     letter-spacing: 0px;
277. }
278.  
279.  
280. #menu .sub {
281.     width: 45%;
282.     padding: 5px 0px 5px 0px;
283.     background: url(../images/menu_level3_line.png) 0 0 repeat-y;
284.     float: left;
285. }
286.  
287. #menu ul.level3 { padding-left: 5px; }
288.  
289. #menu a.level3:link,
290. #menu a.level3:visited { color: #ffffff; }
291. #menu a.level3:hover {
292.     color: #ffffff;
293.     text-decoration: underline;
294. }
295.  
296. #menu a.level3 span.bg,
297. #menu span.level3 span.bg {
298.     padding-left: 15px;
299.     background: url(../images/menu_level3_item.png) 2px 5px no-repeat;
300.     line-height: 17px;
301.     font-size: 11px;
302. }
303.  
304.  
305.  
306.  
307.  
308.  
309. #menu .columns2 ul.level2,
310. #menu .columns3 ul.level2,
311. #menu .columns4 ul.level2 { float: left; }
312.  
313. #menu .columns2 ul.level2 { width: 50%; }
314.  
315. #menu .columns3 ul.level2 { width: 34%; }
316. #menu .columns3 ul.first,
317. #menu .columns3 ul.last { width: 33%; }
318.  
319. #menu .columns4 ul.level2 { width: 25%; }
320.  
321. #menu .columns2 li.level2 .group-box1,
322. #menu .columns3 li.level2 .group-box1,
323. #menu .columns4 li.level2 .group-box1 { margin-right: 5px; }
324.  
325. #menu .columns2 ul.last li.level2 .group-box1,
326. #menu .columns3 ul.last li.level2 .group-box1,
327. #menu .columns4 ul.last li.level2 .group-box1 { margin-right: 0px; }
328.  
329.  
330. /*
331.  * sub menus
332.  */
333.  
334.  
335. div.mod-menu ul {
336.     margin: 0px;
337.     padding: 0px;
338.     overflow: hidden;
339.     list-style: none;
340. }
341.  
342. div.mod-menu ul.menu li {
343.     margin: 0px;
344.     padding: 0px;
345. }
346.  
347. div.mod-menu ul.menu a,
348. div.mod-menu ul.menu span { display: block; }
349. div.mod-menu ul.menu a { text-decoration: none; }
350.  
351.  
352. div.mod-menu ul.menu span.icon {
353.     background-repeat: no-repeat;
354.     background-position: 5px 50%;
355.     text-indent: 35px;
356. }
357.  
358.  
359. div.mod-menu ul.menu li.parent span.separator { cursor: pointer; }
360.  
361.  
362. div.mod-menu ul.menu span.subtitle { display: none; }
363.  
364.  
365. /*
366.  * sub menu: mod-menu-blank
367.  */
368.  
369. div.mod-menu-blank ul.menu span.bg {
370.     height: 35px;
371.     line-height: 35px;
372.     text-indent: 15px;
373. }
374.  
375.  
376. div.mod-menu-blank ul.menu a.current span.bg { font-weight: bold; }
377.  
378.  
379.  
380.  
381.  
382. div.mod-menu-blank ul.menu li.level1 { margin-bottom: 5px; }
383.  
384. div.mod-menu-blank ul.menu a.level1,
385. div.mod-menu-blank ul.menu span.level1 {
386.     background: #C0C0C0 url(../images/submenu_level1_item.png) 0 0 no-repeat;
387.     text-transform: uppercase;
388. }
389.  
390. div.mod-menu-blank ul.menu a.level1 span.bg,
391. div.mod-menu-blank ul.menu span.level1 span.bg {
392.     font-size: 16px;
393.     color: #ffffff;
394. }
395.  
396.  
397. div.mod-menu-blank ul.menu li.parent a.level1,
398. div.mod-menu-blank ul.menu li.parent span.level1 { background-position: 100% -35px; }
399.  
400. div.mod-menu-blank ul.menu li.parent a.active,
401. div.mod-menu-blank ul.menu li.parent span.active { background-position: 100% -70px; }
402.  
403.  
404. div.mod-menu-blank ul.menu li.active a.level1,
405. div.mod-menu-blank ul.menu li.active span.level1 { background-color: #FA641E; }
406.  
407. div.mod-menu-blank ul.menu li.active a.level1:hover,
408. div.mod-menu-blank ul.menu li.active span.level1:hover { background-color: #82B400; }
409.  
410.  
411. div.mod-menu-blank ul.menu a.level1 span.icon,
412. div.mod-menu-blank ul.menu span.level1 span.icon { text-indent: 35px; }
413.  
414.  
415. div.mod-menu-blank ul.menu li.level2 { background: url(../images/submenu_level2_bg.png) 0 0 repeat-y; }
416.  
417. div.mod-menu-blank ul.level2 li.first { margin-top: 5px; }
418. div.mod-menu-blank ul.level2 ul li.first { margin-top: 0px; }
419.  
420. div.mod-menu-blank ul.menu li.level2 span.bg {
421.     height: 20px;
422.     line-height: 20px;
423. }
424.  
425. div.mod-menu-blank ul.menu a.level2 span.bg { text-indent: 15px; }
426.  
427.  
428. div.mod-menu-blank ul.menu a.level3 span.bg { text-indent: 25px; }
429.  
430.  
431. div.mod-menu-blank ul.menu a.level4 span.bg { text-indent: 35px; }
432.  
433. /*
434.  * sub menu: mod-line
435.  */
436.  
437. div.mod-line ul.menu span.bg {
438.     height: 25px;
439.     background: #ffffff url(../images/module_line.png) 0 100% repeat-x;
440.     line-height: 25px;
441.     text-indent: 5px;
442. }
443.  
444.  
445. div.mod-line ul.menu a.current span.bg { font-weight: bold; }

 

ап. вгляните кто-нибудь, очень прошу

 

разобралси, методом научного тыка и исключения,
видоизменил следующие строки

Код (html):

1. div.mod-menu-blank ul.menu a.level2 span.bg { text-indent: 0px; }
2.  
3. div.mod-menu-blank ul.menu li.level2 span.bg {
4.     height: px;
5.     line-height: 14px;
6. margin-left:15px;
7. margin-right:4px;
8. text-indent: 0px;
9. }
10.  
11. #menu span.level2 span.bg {
12.     height: 45px;
13.     line-height: 45px;
14.     text-indent: 10px;
15.     color: #ffffff;
16.     font-size: 14px;
17. }
18.  
19. div.mod-menu-blank ul.menu span.bg {
20.     height: px;
21.     line-height: 35px;
22.     text-indent: 15px;
23. magrin-top:5px;
24. margin-bottom:5px;
25. }
26.  
27. #menu a.level2 span.subtitle, #menu span.level2 span.subtitle {
28.     margin-top: -8px;
29.     font-size: 10px;
30.     font-weight: normal;
31.     line-height: 10px;
32.     text-transform: none;
33.     letter-spacing: 0px;
34. }
35.  
36.  
37.  
38. #menu a.level2 span.title, #menu span.level2 span.title {
39.     line-height: 33px;
40. }