Das CSS-Horizontalmenü wird umgebrochen, wenn das Browserfenster schrumpft

Question

Ich habe ein horizontales Menü, das gut aussieht, wenn das Browserfenster maximiert ist. Wenn ich das Browserfenster verkleinere oder die Seite auf dem Telefon ansehe, werden die Menüelemente in eine neue Zeile umgebrochen. Ich habe jedes Beispiel online mit ähnlichen Problemen ohne Erfolg versucht.

HTML:

<div id="menu"> 
    <ul> 
     <li><a href="index.html" accesskey="1" title="">Homepage</a></li> 
     <li class="current_page_item"><a href="#" accesskey="2" title="">FAQ</a></li> 
     <li><a href="AboutUs.html" accesskey="3" title="">About Us</a></li> 
     <li><a href="Policies.html" accesskey="4" title="">Policies</a></li> 
     <li><a href="ContactUs.html" accesskey="5" title="">Contact Us</a></li> 
     <li><a href="Strategies.html" accesskey="6" title="">Strategies</a></li> 
     <li><a href="Testimonials.html" accesskey="7" title="">Testimonials</a></li> 
     <li><a href="Tutorial.html" accesskey="8" title="">Tutorial</a></li> 
    </ul> 
</div> 

CSS:

#menu 
{ 
    position: absolute; 
    right: 0; 
    top: 0; 
    overflow-x:scroll; 
} 

#menu ul 
{ 
    display: inline-block; 
} 

#menu li 
{ 
    display: block; 
    float: left; 
    text-align: center; 
} 

#menu li a, #menu li span 
{ 
    display: block; 
    padding: 0em 1.5em; 
    height: 150px; 
    letter-spacing: 0.20em; 
    line-height: 150px; 
    text-decoration: none; 
    font-size: 0.90em; 
    font-weight: 600; 
    text-transform: uppercase; 
    outline: 0; 
    color: #ACCFFF; 
} 

Answer 1

Sie müssen das Menü eine Mindestbreite Wrapper geben, wie min-width: 1225px; dieses jsfiddle See.

Answer 2

Per dieser previous question folgende Änderungen vorgenommen:

#menu ul{white-space: nowrap;} 
#menu li{display: inline-block;} 

Die "float: left;" auf dem "#menu li" ist nicht notwendig. Das zusätzliche Problem mit Ihrem Code ist, dass die absolute Positionierung des Menüs # das X-Scrollen verhindert, also wenn Sie wirklich eine Scrollbar möchten, die gelöscht werden müsste.

Siehe dieses jfiddle für ein funktionierendes Beispiel.

Was jedoch mehr akzeptiert wird, ist die Vermeidung der hässlichen Bildlaufleiste in Menüs und das Reduzieren des Menüs für kleinere Bildschirme. W3 Schools haben eine Demo dafür.