Förhindra att CSS meny skjuts ihop på små skärmar?

Har ett problem med en CSS meny som jag undrar om någon har lust att hjälpa mig med.

Jag vill att menyn håller sig horisontell och ser likadan ut som den gör på stora skärmar, fast att man antigen får scrolla, eller att hela menyn skalas ner, men ser likadan ut.

Om jag med koden som den ser ut nu, visar det hela på en iphone, så fungerar det. På android så sker samma sak som om jag drar ner mitt firefox fönster på datorn till något litet format. Då skjuts hela menyn ihop och knappar som inte får plats hamnar på en av de andra knapparna. (Hoppas någon förstår vad jag menar.)

Och btw, keep it simple. Jag är en riktig rookie på allt som har med att göra webbsidor att göra. Försöker lära mig, men har för tillfället fastnat.

Edit: Glömde, här är koden/ sidan jag försöker få fungera som jag vill. http://www.drunkenmasters.se

position:absolute;

width: 100%;

Provade detta och visst fungerar det, men om jag visar sidan i Internet Explorer tycks den kapa av menyn av någon konstig anledning.

overflow-x: auto

Okej, tack. Dock visade det sig precis att IE visst visade rätt, det var bara min webbläsare som hade lagrat att visa i kompatibilitetsläge, när jag stängde av det visades den korrekt igen.