Witam,

Borykam się obecnie z problemem odpowiedniego dostosowania menu do rozdzielczości.


Na mojej docelowej rozdzielczości menu wyświetla się dobrze:




Ale w momencie jak przesunę okno (zmniejsze szerokość) menu się rozjezdza i wypada z diva header



CSS

[PHP] pobierz, plaintext 
#header{
position: static;
background: #231f20;
width: 100%;
height: 150px;
top: 0px;
left: 0px;
margin: 0px;
font-family: myriadweb;
}
 
#menu_lewe{
color: white;
position: absolute;
margin-top: 80px;  
}
 
#menu_lewe{
color: white;
position: absolute;
margin-top: 80px;  
}
 
#menu_lewe li{
padding: 20px;
float: left;
display: block;
}
 
 
 
#menu_prawe{
color: white;
position: absolute;
margin-top: 80px; 
margin-left: 80%; 
}
 
#menu_prawe li{
padding: 20px;
float: left;
display: block;
}
 
[PHP] pobierz, plaintext 

HTML

[PHP] pobierz, plaintext 
     <div id="header">
 
           <div id="logo"><img src="./images/logo.png"></div>
 
           <div id="menu_lewe">
              <ul>
                <li>OPCJA 1</li>
                <li>OPCJA 2</li>
                <li>OPCJA 3</li>               
              </ul>
           </div>
           <div id="menu_prawe">
              <ul>
                <li>CONTACT</li>
                <li>PRESS</li>                
              </ul>
           </div>
 
 
     </div>
[PHP] pobierz, plaintext 

Jak to poprawić, testowałem z róznymi position ale nie wyszło

[CSS] pobierz, plaintext 
 
#menu_prawe{
color: white;
position: absolute;
margin-top: 80px; 
margin-right:50px;
}
 
#menu_prawe li{
padding: 20px;
float: left;
display: block;
}
 
[CSS] pobierz, plaintext 

Po tej zmianie menu prawe po prosty pojawia się w lewej strony i "zasłania" menu lewe.

Chcę aby to menu pozostało w takiej pozycji jak jest czyli po prawej stronie, ale aby nie wypadało przy innej rozdzielczości z headera a przesuwało się w lewą stronę.