Hendric: Probleme bei der Formatierung einer Liste mit CSS

Beitrag lesen

Hallo,

beim Code unten entsteht beim Betrachten mit dem Firefox folgendes Problem:

"Seite1" und "Seite2" werden zunächst korrekt nebeneinander angezeigt. Sobald ich allerdings mit der Maus über "Seite1" fahre wird "Seite2" darunter angezeigt. "Seite2" sollte allerdings weiterhin neben "Seite1" angezeigt werden. Habt ihr eine Ahnung, wie ich das möglichst einfach erreichen kann?

  
<html>  
 <head>  
  <style type="text/css">  
   ul.navigation li  
   {  
    list-style: none;  
   }  
  
   ul.navigation > li  
   {  
    display: inline;  
   }  
  
   ul.navigation li ul  
   {  
    display: none;  
   }  
  
   ul.navigation li:hover ul  
   {  
    display: block;  
   }  
  
   ul.navigation a:hover  
   {  
    background-color: red;  
   }  
  </style>  
 </head>  
  
 <body>  
   <ul class="navigation">  
     <li>  
       <a href="#Beispiel">Seite 1</a>  
       <ul>  
         <li><a href="#Beispiel">Seite 1a</a></li>  
  <li><a href="#Beispiel">Seite 1b</a></li>  
      </ul>  
     </li>  
     <li>  
       <a href="#Beispiel">Seite 2</a>  
       <ul>  
         <li><a href="#Beispiel">Seite 2a</a></li>  
  <li><a href="#Beispiel">Seite 2b</a></li>  
       </ul>  
     </li>  
   </ul>  
 </body>  
</html>