fastix®: ausklappbare Navigationsleiste - onmouseout

Beitrag lesen

Moin!

Im Jahr 2010 geht das ganz einfach und schlank mit CSS:

1. Du baust eine Liste. Die muss ja nicht aussehen wie eine Liste :)

2. Beim Überfahren eines Listenelementes der ersten Gruppe (:hover) wird die dazugehörende, eingeschlossene, Liste angezeigt (display:block)

Tipp: Vermeide margins. Opera regiert darauf sehr unwirsch und schließt dann das Menü.

Hier der einfache Fall:

HTML:

  
<div class="menue">  
  <ul>  
     <li>Gruppe A  
        <ul>  
          <li>Link A 1</li>  
          <li>Link A 2</li>  
        </ul>  
     </li>  
  
     <li>Gruppe B  
        <ul>  
          <li>Link B 1</li>  
          <li>Link B 2</li>  
          <li>Link B 3</li>  
        </ul>  
     </li>  
  </ul>  
</div><!-- klappmenue -->

CSS:

div.menue ul {  
  cursor:pointer;  
  display:block;  
}  
  
  
div.menue ul ul {  
    display:none;  
}  
  
div.menue ul li:hover ul {  
    display:block;  
}

MFFG (Mit freundlich- friedfertigem Grinsen)

fastix