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

сайт beta.openvpn.ru . версия joomla 1.5.13

при сужении окна браузера пункты горизонт меню падают вниз.

зафиксировал меню по ширине выставив содержащему его контейнеру правый и левый margin: auto

хочется чтобы пункты автоматически сужались при сужении окошка браузера либо 2й вариант, хотя бы сделать чтобы пункты держались по горизонтали в одной строчке а не падали вниз

сейчас это выглядит так

Код (html):

1. <!-- MENU -->
2. <table class="menubg" width="100%" height="33px" align="center" border="0" cellpadding="0" cellspacing="0" background"menu_bg_.jpg">
3.    <td> <div id="top" align="center">   <table cellpadding="0" cellspacing="0" class="moduletable">
4.             <tr>
5.             <td>
6.  
7.                
8. <ul class="menu-nav" id="top">
9.     <li id="current" class="active item1">
10.         <a href="http://beta.openvpn.ru/">
11.             <span>Главная</span>
12.         </a>
13.     </li>
14.     <li class="item59">
15.         <a href="/index.php?option=com_content&amp;view=article&amp;id=69&amp;Itemid=59&amp;lang=ru">
16.  
17.             <span>Технологии</span>
18.         </a>
19.     </li>
20.     <li class="item18">
21.         <a href="/index.php?option=com_content&amp;view=category&amp;id=39&amp;Itemid=18&amp;lang=ru">
22.             <span>Настройка и помощь</span>
23.         </a>
24.     </li>
25.  
26.     <li class="item29">
27.         <a href="/index.php?option=com_content&amp;view=article&amp;id=67&amp;Itemid=29&amp;lang=ru">
28.             <span>Цены</span>
29.         </a>
30.     </li>

css

Код (CODE):

1. #top
2.    {
3.     position: relative;
4.     right: 35px;
5.     FLOAT: left;
6.     padding: 0px;
7.     height: 20px;
8.     margin-top: 0px;
9.     margin-right: auto;
10.     margin-bottom: 0px;
11.     margin-left: auto;
12.    }
13.    
14.     ul.menu-nav
15.     {
16.     list-style-type: none;
17.  
18.     }    
19.     ul.menu-nav li
20.     {
21.     display: inline;
22.     padding-left: 112px;
23.     margin: 0px;
24.     FLOAT: left;
25.     POSITION: relative
26.     }
27.     ul.menu-nav li a
28.     {
29.     color: #FFFFFF;
30.     font-size: 14px;
31.     text-decoration: none;
32.     DISPLAY: block;
33.     }
34.     ul.menu-nav li a:hover
35.     {
36.     color: #FFFFFF;
37.     font-size: 14px;
38.     text-decoration: underline;
39.     }
40.     ul.menu-nav li a:visited
41.     {
42.     color: #FFFFFF;
43.     font-size: 14px;
44.     text-decoration: none;
45.     }
46.     ul.menu-nav li.item28
47.     {
48.     background-image: url(../images/dev.jpg);
49.     background-repeat: no-repeat;
50.     color:#FFFFFF;
51.     background-position: 50px center;
52.     display: inline;
53.     }
54.     ul.menu-nav li.item29
55.     {
56.     background-image: url(../images/dev.jpg);
57.     background-repeat: no-repeat;
58.     color:#FFFFFF;
59.     background-position: 50px center;
60.     display: inline;
61.     }
62.     ul.menu-nav li.item18
63.     {
64.     background-image: url(../images/dev.jpg);
65.     background-repeat: no-repeat;
66.     color:#FFFFFF;
67.     background-position: 50px center;
68.     display: inline;
69.     }

подскажите как быть?! решение наверняка типичное, но поиски не к чему не привели к сожалению..

 

т е картинка распорка будет равна ширине пункта меню? или ширине всего меню?!
просто не делал ничего подобного ранее ..
впрочем и свойство nowarp тоже не использовал ..