Résolution du menu Css

Question

Bonjour, je suis en train de créer un modèle Joomla. Je vérifie régulièrement mon modèle dans d'autres résolutions pour voir à quoi il ressemble.

Mon problème est le menu. J'utilise % precent pour la largeur dans tous les conteneurs.

Quand je mets la résolution 1024 ou 800X600 ou un zoom dans la page, mon menu horizontal ressemble à ceci:

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

Mais dans la résolution higler fonctionnent très bien et afficher tout comme ceci:

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

J'ai googlé mais je n'ai aucune idée pour résoudre ce problème. Peut-être que j'ai fait quelque chose de mal dans mon code. S'il vous plaît vérifier mon code et si vous pouvez me aider me dire ce qu'il faut changer pour résoudre ce problème:

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

Vous pourriez peut-être essayer quelque chose comme ça

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

On dirait que votre désir pleinement adapté aux besoins?