la barre de navigation d'emballage sur les petites résolutions

Je tente ma main au HTML5/CSS3 comme un processus d'apprentissage, mais j'ai du mal à créer une barre de navigation pour des liens vers d'autres sections à travers mes pages.
J'ai adapté le code à partir d'un tutoriel trouvé et ça fonctionne, mais uniquement lors de l'affichage sur une résolution de 1080p, si la largeur est plus petite, la barre des roulés sur d'autres lignes.

Comment puis-je m'assurer que la barre de navigation ne prend qu'une ligne vers le haut (rétrécit pour s'adapter), quel que soit la résolution de l'aide de l'utilisateur?

la barre de navigation d'emballage sur les petites résolutions

Voici mon code CSS pour la barre de navigation. Veuillez noter que, conformément nav, j'ai mis de la largeur à 33,3% et le rembourrage pour le de même afin de centre les boutons. Je ne sais pas si c'est la cause.

nav {
display:block;
position: absolute;
left:0; 
white-space:nowrap; 
margin: 0 auto; 
width: 33.3%; 
background-color:#ff6600;
padding-left: 33.3%; 
padding-right: 33.3%; 
} 
nav ul { 
margin: 0 auto; 
width: 100%; 
list-style: none;
display: inline;
white-space:nowrap; 
} 
nav ul li { 
float: left;
position: relative;
white-space:nowrap; 
} 
nav ul li a { 
display: block; 
margin: 0 auto; 
width: 150px; 
font-size: 16px;
font-family: century gothic; 
line-height: 44px; 
text-align: center; 
text-decoration: none; 
color:#575757;
white-space:nowrap; 
} 
nav ul ul { 
width: 200px;
position:absolute; 
top:-99999px; 
left:0; 
opacity: 0; 
-webkit-transition: opacity .4s ease-in-out; 
-moz-transition: opacity .4s ease-in-out; 
-o-transition: opacity .4s ease-in-out; 
transition: opacity .4s ease-in-out; 
z-index:497; 
background:#333; 
padding: 2px; 
border:1px solid #444; 
border-top:none; 
box-shadow:#111 0 3px 4px; 
}
nav ul ul li a { 
display: block;
width: 200px;
text-align: left;
padding-left: 3px;
font-size: 14px;    
}   
nav ul li:hover>ul{
opacity: 1; 
position:absolute; 
top:98%; 
left:0;
}
nav ul li a:hover { 
color: #fff;
background-color: #cc3300 
} 
nav ul li.selected a { 
color: #fff; 
background-color: #cc3300; 
}

OriginalL'auteur user1563865 | 2012-07-30