Media Queries

[bleumi85]

Guten Morgen,

ich versuche mich gerade das erste mal an MediaQueries und habe mir dazu folgenden Programmcode gebaut:

<section>
   <ul>
      <li><a class="menubutton" href="#"><img src="pics/menu.png" /></a></li>
   </ul>
</section>
<nav class="nav">
   <ul>
      <li><a href="menue1.php">Menüpunkt 1</a></li>
      <li><a href="menue2.php">Menüpunkt 2</a></li>
      <li><a href="menue3.php">Menüpunkt 3</a></li>
      <li><a href="menue4.php">Menüpunkt 4</a></li>
   </ul>
</nav>

Darüber hinaus hab ich einen kleinen Schnipsel Javascript der dafür sorgt, dass das nav bei Klick auf den "menubutton" ein- bzw. ausgeblendet wird. Dieser sieht wie folgt aus:

$(document).ready(function() {
   $('.menubutton').click(function() {
      $('.nav').slideToggle('slow');
   });
});

Darüber hinaus hab ich mir mein Menü natürlich optisch schön gestaltet. Das entscheidende ist aber, dass ich mir das Menü bei geringer Bildschirmbreite (bspw. Handybildschirmen) als block anzeigen lassen möchte, also untereinander und bei großer Bildschirmbreite (bspw. Desktop-PC) nebeneinander. Da der Menubutton bei großer Bildschirmbreite nicht benötigt wird blende ich ihn einfach aus. Auch das ist wie ich finde recht einfach zu realiseren und ich habe es wie folgt gelöst:

.nav li{
   width:100%;
}

@media (min-width:400px){
   #menubar img{
      display:none;
   }
   .nav li{
      float:left;
      width:20%;
   }
}

Jetzt habe ich folgendes Problem: Wenn ich auf meinem Desktop-PC das Browserfenster kleiner ziehe (also unter 400px) nimmt das nav genau wie gewünscht Blockform an und der Menübutton erscheint. Wenn ich auf diesen klicke kann ich das nav genau wie geplant ein- und ausblenden. Also alles super. Wenn ich das nav jedoch ausblende und dann das Browserfenster wieder größer ziehe verschwindet der Menübutton und ich habe keine Chance mehr mir das nav einblenden zu lassen.

Wie kann ich es lösen, dass mein nav IMMER eingeblendet ist, sobald ich in den Bereich von mehr als 400px Bildschirmbreite komme?