Ich habe mir eine Navigation mit Pop-Up geschrieben. Allerdings ist dieses Pop-Up im Hintergrund, wenn dort etwas anderes steht. Ich poste hier erstmal den wichtigen Code:

Mein Stylesheet:

Code :

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39

.Navigation {   background-image: url(gui/navi.png);   background-color: transparent;   margin-right: auto;   width: 1000px;   text-decoration: none;   color: #333333;   background-repeat: no-repeat;   background-position: center top;   font-size: 30px;   height: 60px;   overflow: hidden;   font-family: Arial; }   .navi_link {   width: 250px;   overflow: hidden;   list-style-type:none;  /* border: solid;   border-color: #000000;  */ }   .navi_link:hover {   background-image: url(gui/LetsPlay_hover.png);   background-repeat: no-repeat; }   .navi_link:hover a {  text-decoration: none;   color: #cc5500;   text-shadow: #eeeeee 1px 1px ;   background-repeat: no-repeat;   height: 80px;   width: 150px;   margin-bottom: 10px;   background-color: transparent;   background-position: center bottom; }

Das ist der Code der Navigation:

HTML-Code:

<menu class="navi_link" onmouseover="getElementById('LetsPlay').style.visibility = 'visible'; getElementById('Navigation').style.overflow = 'visible'; "
    onmouseout="getElementById('LetsPlay').style.visibility = 'hidden'; getElementById('Navigation').style.overflow = 'hidden'; ">
   <li> <a
    class="navi_link_a"
    onmouseover="getElementById('LetsPlay').style.visibility = 'visible'; getElementById('Navigation').style.overflow = 'visible'; "
    onmouseout="getElementById('LetsPlay').style.visibility = 'hidden'; getElementById('Navigation').style.overflow = 'hidden'; "
    href="?p=1">
    Let's Play
    </a>  </li>

      <li>  <div
        style="visibility: hidden;"
        class="LetsPlay"
        id="LetsPlay"
        onmouseover="getElementById('LetsPlay').style.visibility = 'visible'; getElementById('Navigation').style.overflow = 'visible';"
        onmouseout="this.style.visibility='hidden'; getElementById('Navigation').style.overflow = 'hidden';"><br />
      <center>Aktuelles Let&apos;s Play:
        <br /><br /><a href="#" style="border: none;"  title="Minecraft Minecolony">
        <img class="LetsPlayImage" src="gui/Covers/Minecraft.jpg" width="178px" height="220px"  /> </a>
        </div></center> </li>
</menu>

Sorry für die schlechten Umrüche, aber meine Bildschirmaflösung ist ziemlich groß

Hi,

hat das Pop-up überhaupt irgendwo position: absolute?
Die CSS-Eigenschaft z-index legt fest in welcher Reihenfolge die Elemente übereinander liegen. Je höher desto weiter oben.

Um dir noch gezielter helfen zu können brauche - zumindest ich - sogar noch mehr Code.
Kennst du http://jsfiddle.net/?

Das schlechte einrücken liegt an der [HTML] ... [/HTML]-Tags, benutz lieber [CODE] ... [/CODE]. Für das obere hättest du hingegen ruhig [CSS] ... [/CSS] verwenden können.

Gruß javaDeveloper2011

Der z-index wird wohl dein Freund sein:

http://www.css4you.de/z-index.html

Nachdem es position: absolut hat, funktioniert es jetzt. Danke