✔ Pop-Up-Menü im Vordergrund

[Slin61]

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:

.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:

<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ß

 

[javaDeveloper2011]

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 [code=css] ... [/code] verwenden können.

Gruß javaDeveloper2011

 

[TheBodo]

Der z-index wird wohl dein Freund sein:

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

 

[Slin61]

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