Drop Down Navigation muss in den Vordergrund

[Spider]

Ausgangssituation

Dazugehörige CSS Codes zu der Hauptnavigation class="navigation1" und zu der Nebennavigation class="navigation2" habe ich in eine externe CSS Datei ausgelagert. Die Nebennavigation befindet sich 20px unter der Hauptnavigation und soll den Besuchern das Rumstöbern komfortabler machen.
Mein Problem ist, dass die Nebennavigation im Vordergrund steht. Heißt, wenn man wieder die Hauptnavigation besuchen möchte geht das nicht, weil die Drop Down Menüs sich hinter die Nebennavigation schieben. Sieht erstens Blöd aus und zweitens kann man die Menüpunkte von der Hauptnavigation nicht mehr auswählen, weil... Im Hintergrund.

Mein HTML Quellcode sieht etwa so aus...

Hauptnavigation (Drop Down Menü)

<div class="navigation1">
 <ul>
  <li><a href="nauptnav1.html">Hauptnavigation 1</a></li>
  <li><a href="nauptnav2.html">Hauptnavigation 2</a></li>
   <ul>
    <li><a href="nauptnav2.1.html">Hauptnavigation 2.1</a>
     <ul>
      <li><a href="nauptnav2.1.1.html">Hauptnavigation 2.1.1</a></li>
      <li><a href="nauptnav2.1.1.html">Hauptnavigation 2.1.1</a></li>
     </ul>
    </li>
    <li><a href="nauptnav2.2.html">Hauptnavigation 2.2</a></li>
    <li><a href="nauptnav2.3.html">Hauptnavigation 2.3</a></li>
    <li><a href="nauptnav2.4.html">Hauptnavigation 2.4</a></li>
    <li><a href="nauptnav2.5.html">Hauptnavigation 2.5</a></li>
   </ul>
  <li><a href="nauptnav3.html">Hauptnavigation 3</a></li>
   <ul>
    <li><a href="nauptnav3.1.html">Hauptnavigation 3.1</a></li>
    <li><a href="nauptnav3.2.html">Hauptnavigation 3.2</a></li>
    <li><a href="nauptnav3.3.html">Hauptnavigation 3.3</a></li>
   </ul>
  </li>
  <li><a href="nauptnav4.html">Hauptnavigation 4</a></li>
   <ul>
    <li><a href="nauptnav4.1.html">Hauptnavigation 4.1</a></li>
    <li><a href="nauptnav4.2.html">Hauptnavigation 4.2</a></li>
     <ul>
      <li><a href="nauptnav4.2.1.html">Hauptnavigation 4.2.1</a></li>
      <li><a href="nauptnav4.2.2.html">Hauptnavigation 4.2.2</a></li>
     </ul>
    </li>
    <li><a href="nauptnav4.3.html">Hauptnavigation 4.3</a></li>
    <li><a href="nauptnav4.4.html">Hauptnavigation 4.4</a></li>
    <li><a href="nauptnav4.5.html">Hauptnavigation 4.5</a></li>
   </ul>
  </li>
  <li><a href="nauptnav5.html">Hauptnavigation 5</a></li>
 </ul>
</div>

<ul class="navigation2">
 <li><a href="nauptnav2.1.html">Hauptnavigation 2.1</a></li>
 <li><a href="nauptnav2.2.html">Hauptnavigation 2.2</a></li>
 <li><a href="nauptnav2.3.html">Hauptnavigation 2.3</a></li>
 <li><a href="nauptnav2.4.html">Hauptnavigation 2.4</a></li>
 <li><a href="nauptnav2.5.html">Hauptnavigation 2.5</a></li>
</ul>

Wie könnte ich dieses Problem Lösen?
Vielen Dank im Voraus