Css menu resolution

Question

Привет, я создаю шаблон Joomla. Я регулярно проверяю свой шаблон в других резолюциях, чтобы посмотреть, как он выглядит.

Моя проблема - это меню. Я использую % precent для ширины во всех контейнерах.

Когда я установить разрешение 1024 или 800X600 или увеличение страницы, мое горизонтальное меню выглядит следующим образом:

**[ item 1 ] [ item 2 ] [ item 3 ] [ item 4 ]** 
**[ item 5][ item 6][ item 7]** 
**[ item 8][ item 9]** 

Но в higler разрешении все работает нормально, и показать, как это:

**[ item 1 ] [ item 2 ] [ item 3 ] [ item 4 ][ item 5 ] [ item 6 ] [ item 7 ] [ item 8 ]** ect... 

Я googled, но у меня нет идеи, как это исправить. Возможно, я сделал что-то не так в моем коде. Пожалуйста, проверьте мой код и если и может помочь мне сказать, что мне изменить, чтобы исправить это:

nav.top-meni { float: left; margin: 0; padding: 0; top: 5px; width: 104%;} 

    #mainlevelmainnav,#mainlevelmainnav ul { 
     width: 104%; 
     float: left; 
     list-style: none outside none; 
     line-height: 1em; 
     background: transparent; 
     font-weight: 600; 
     margin: 0; 
     padding: 0; 
    } 

    #mainlevelmainnav li { 
     float: left; 
     background: -moz-linear-gradient(center top, #EBEBEC 0px, #F1F1F1 56%, #E1E1E1 62%, 
      #E2E3E4 100%) repeat scroll 0 0 transparent; 
     padding: 0px; 
    } 

    #mainlevelmainnav li a { 
     white-space: nowrap; 
     display: block; 
     float: left; 
     color: #1A1A1A; 
     text-decoration: none; 
     font: 15px 'droid_regular', arial, serif; 
     letter-spacing: -1px; 
     height: 25px; 
     padding: 11px 15px 3px; 
     border-left: 1px solid #FFFFFF; 
     border-right: 1px solid #C3C3C3; 
     text-shadow: 0 1px 0 #FFFFFF; 
    } 

    #mainlevelmainnav li ul { 
     position: absolute; 
     height: auto; 
     width: 11em; 
     font-weight: 400; 
     background: #36f; 
     border: #00C 1px solid; 
     margin: 0; 
    } 

    #mainlevelmainnav li li { 
     width: 11em; 
    } 

    #mainlevelmainnav li ul a { 
     width: 11em; 
     color: #fff; 
     font-size: 0.9em; 
     line-height: 1em; 
     font-weight: 400; 
    } 

    #mainlevelmainnav li a:hover { 
     display: block; 
     float: left; 
     color: #fac825; 
     text-decoration: none; 
     font: 15px 'droid_regular', sans-serif; 
     letter-spacing: -1px; 
     height: 25px; 
     background: #1A1A1A; 
     text-shadow: 0 1px 0 #000; 
    } 

    #mainlevelmainnav li:hover ul ul,#mainlevelmainnav li:hover ul ul ul,#mainlevelmainnav li.sfhover ul ul,#mainlevelmainnav li.sfhover ul ul ul 
     { 
     left: -999em; 
    } 

    #mainlevelmainnav li:hover ul,#mainlevelmainnav li li:hover ul,#mainlevelmainnav li li li:hover ul,#mainlevelmainnav li.sfhover 
     #mainlevelmainnav ul li li.sfhover ul,#mainlevelmainnav li li li.sfhover ul 
     { 
     left: auto; 
     z-index: 6000; 
    } 

    #mainlevelmainnav li li:hover,#mainlevelmainnav li li.sfhover { 
     background: #039 url(../images/soccerball.gif) 98% 50% no-repeat; 
    } 

<nav class="top-meni"> 
    <jdoc:include type="modules" name="menu-full" /> 
</nav> 

Answer 1

Вы могли бы попробовать что-то вроде этого

#mainlevelmainnav li li, #mainlevelmainnav li ul a, #mainlevelmainnav li ul { max-width: 11em; width: 100%; } 
#mainlevelmainnav,#mainlevelmainnav ul { max-width: 1600px; width: 104%; } 

Похоже, ваше желание его полностью реагировать?