Feste Menübreite funktioniert nicht - eine zweite Zeile unterbinden

[dchrist1]

Hey,


ich würde gerne ein Menü mit einer festen Breite realisieren, egal wieviele Menüpunkte enthalten sind.

<div class="header-top">        
        <!-- Navigation Level 1 -->
        <div class="nav1">
          <ul>
            <li><a href="#" title="Send us a message">Kontakt</a></li>                                
          </ul> 
          <ul>  
            <li><a href="#" title="Send us a message">International</a>
              <ul>
                <li><a href="#" title="English">English</a></li>
                <li><a href="#" title="Deutsch">Deutsch</a></li>
                <li><a href="#" title="Francais">Fran&ccedil;ais</a></li>
                <li><a href="#" title="Italiano">Italiano</a></li>
              </ul>
            </li>
          </ul>
          <ul>
            <li><a href="#" title="Who we are">Sitemap</a></li>
          </ul>
          <ul>  
            <li><a href="#" title="Send us a message">Impressum</a></li>
          </ul>                                             
        </div>
        <!-- Search form -->                  
        <div class="searchform">
          <form action="index.html" method="get">
            <fieldset>
              <input name="field" class="field"  value=" Search..." />
              <input type="submit" name="button" class="button" value="GO!" />
            </fieldset>
          </form>
        </div> 
        <!-- A.3 HEADER BOTTOM -->
        <div class="header-bottom">
      
        <!-- Navigation Level 2 (Drop-down menus) -->
        <div class="nav2">
        <ul>
             <!-- Navigation item -->
            <li class="design_eins"><a href="index.html">Ein sehr langer Menutitel</a></li>
            <li class="design_zwei"><a href="#">Ein sehr langer Menutitel 1</a></li>
            <li class="design_drei"><a href="#">Ein sehr langer Menutitel 2</a></li>
            <li class="design_vier"><a href="#">Ein sehr langer Menutitel 3</a></li>
            <li class="design_fuenf"><a href="#">Ein sehr langer Menutitel 4</a></li>
        </ul>                              
        </div>
      </div>           
      </div>

Und hier die CSS-Datei:

/*Drop-down menu*/
.nav2 {margin:1.5em 0 0 0; white-space:nowrap /*IE hack*/; float:left;  width:954px; color:rgb(255,255,255); font-size:120%;} /*Color navigation  bar normal mode*/
.nav2 ul { list-style-type:none;}
.nav2 ul li {float:left; z-index:auto !important /*Non-IE6*/; z-index:1000 /*IE6*/; border-right:solid 1px rgb(255,255,255);}
.nav2 ul li a {float:none !important /*Non-IE6*/; float:left /*IE-6*/;  display:block; padding:0 16px 0 16px; text-decoration:none;  font-weight:normal; color: rgb(255,255,255);}
.nav2 ul li ul {display:none; border:none;}

.design_eins {background-color:rgb(51,103,153);}
.design_zwei {background-color:rgb(159,0,95);}
.design_drei {background-color:rgb(5,132,113);}
.design_vier {background-color:rgb(173,10,15);}
.design_fuenf {background-color:rgb(231,169,34);}

/*Non-IE6 hovering*/
.nav2 ul li:hover {position:relative;} /*Sylvain IE hack*/
.nav2 ul li:hover a {background-color:rgb(218,222,226);  text-decoration:none; color:rgb(80,80,80);} /*Color main cells hovering  mode*/
.nav2 ul li:hover ul {display:block; width:10.0em; position:absolute; z-index:999; top:2.0em; margin-top:0.1em; left:0;}
.nav2 ul li:hover ul li a {white-space:normal; display:block;  width:10.0em; height:auto; line-height:1.3em; margin-left:-1px;  padding:4px 16px 4px 16px; border-left:solid 1px rgb(175,175,175);  border-bottom: solid 1px rgb(175,175,175);  background-color:rgb(240,240,240); font-weight:normal;  color:rgb(80,80,80);} /*Color subcells normal mode*/
.nav2 ul li:hover ul li a:hover {background-color:rgb(218,222,226); text-decoration:none;} /*Color subcells hovering mode*/

/*IE6 hovering*/
.nav2 table {position:absolute; top:0; left:-1px; border-collapse:collapse;}
.nav2 ul li a:hover {position:relative /*Sylvain IE hack*/; z-index:1000  /*Sylvain IE hack*/; background-color:rgb(218,222,226);  text-decoration:none;color:rgb(80,80,80);} /*Color main cells hovering  mode*/
.nav2 ul li a:hover ul {display:block; width:10.0em; position:absolute;  z-index:999; top:2.1em; t\op:2.0em; left:0; marg\in-top:0.1em;}
.nav2 ul li a:hover ul li a {white-space:normal; display:block;  w\idth:10.0em; height:1px; line-height:1.3em; padding:4px 16px 4px 16px;  border-left:solid 1px rgb(175,175,175); border-bottom: solid 1px  rgb(175,175,175); background-color:rgb(218,222,226); font-weight:normal;  color:rgb(80,80,80);} /*Color subcells normal mode*/
.nav2 ul li a:hover ul li a:hover {background-color:rgb(218,222,226); text-decoration:none;} /*Color subcells hovering mode*/

Könnt ihr mir sagen, wieso das Menü eine zweite Zeile erhält? Ich würde gerne, dass alle Menüpunkte gleich breit sind und das ganze Menü zusammen nur 954px breit ist. Die Höhe des Menüs kann dann ruhig höher sein, wenn der Text sonst nicht reinpasst. Aber auf keinen Fall eine zweite Zeile in der ein Menüpunkt springt.

Hier ist sonst auch nochmal die Zip-Datei mit der HTML-Datei und der CSS Datei.
http://www.materialordner.de/4fyGYsq...riHVcbzP5.html


Könnt ihr mir vielleicht weiterhelfen?

Viele Grüße

Daniel