# Drop-Down-Menu verdeckt Bild



## Stoffelchen (23. August 2006)

Moin 

Meine Überschrift sagt eigentilch schon alles ^^ ... Mein Drop-Down-Menu, dass ich oberhalb meines Main-Fenster habe (also eine horizontale Navigation), verdeckt z.T. meine Bilder, die ich gerne im Main-Fenster öffnen würde. Ich habs schon mit z-index versucht, aber das will auch nicht *_*

Gibbet da noch einen anderen css-Befehl?

Lg Stefi


----------



## Maik (23. August 2006)

Wie sieht denn der dazugehörige Quelltext (HTML + CSS) aus?


----------



## Stoffelchen (23. August 2006)

Im Moment habe ich nur eine Datei. Gestaltet sich etwas einfacher ^^

Hier der css Auszug:

```
<style type="text/css">
body {
  font-family: Arial, Tahoma;
  font-size: 0.8em;
  background: bbb;
  line-height: 1.6em;
}

hr {
  margin-top: -7px;
  color: maroon;
}

#container_rahmen, .copyright {
  position: absolute;
}

#container_rahmen {
  background: fff;
  top: 50%;
  left: 50%;
  width: 800px;
  height: 450px;
  margin-top: -225px;
  margin-left: -400px;
  padding: 15px;
  border-bottom: #6f6f6f  solid 1px;
  border-right: #6f6f6f solid 1px;
}

#container {
  background: efefef;
  width: 100%;
  height: 100%;
  border-top: #6f6f6f solid 1px;
  border-left:  #6f6f6f solid 1px;
  border-bottom: #bbb solid 1px;
  border-right: #bbb solid 1px;
  padding: 10px;
}

#bild {
  float:left;
  margin-right: 15px;
}

#ueberschrift {
  font-size: 2em;
  font-family:  Quark Neon, Arial;//Annifont;//Monotype Corsiva;
}

/* style the outer div to give it width */
.menu {
  width: 750px; 
  font-size: 0.85em;
  border-top: 2px solid maroon;
  padding-bottom: 10px;
}

/* remove all the bullets, borders and padding from the default list styling */
.menu ul {
  padding: 0;
  margin: 0;
  list-style-type: none;
}

.menu ul ul {
  width: 150px;
}


/* float the list to make it horizontal and a relative positon so that you can control the dropdown menu positon */
.menu li {
  float: left;
  width: 139px;
  position: relative;
}

/* style the links for the top level */
.menu a, .menu a:visited {
  width: 150px; 
  height: 30px; 
  font-size: 1em;
  color: #fff; 
  text-decoration:none;
  display: block;
  border: 1px solid #fff; 
  border-width: 1px 1px 0 0; 
  background: maroon; 
  padding-left: 10px; 
  line-height:30px;
}

/* a hack so that IE5.5 faulty box model is corrected */
* html .menu a, * html .menu a:visited {
  width:149px;
  w\idth:139px;
}

/* style the second level background */
.menu ul ul a.drop, .menu ul ul a.drop:visited {
  background: maroon;
  color: #fff;
}

/* style the second level hover */
.menu ul ul a.drop:hover{
  background: maroon;
}

/* style the third level background */
.menu ul ul ul a, .menu ul ul ul a:visited {
  background: #e2dfa8;
} 

/* style the third level hover */
.menu ul ul ul a:hover {
  background: maroon;
}

/* hide the sub levels and give them a positon absolute so that they take up no room */
.menu ul ul {
  visibility: hidden;
  position: absolute;
  height: 0;
  top: 31px;
  left: 0; 
  width: 150px;
}

/* another hack for IE5.5 */
* html .menu ul ul {
  top:30px;
  t\op:31px;
}

/* position the third level flyout menu */
.menu ul ul ul{
  left:129px; 
  top:0;
  width:150px;
}
/* position the third level flyout menu for a left flyout */
.menu ul ul ul.left {
  left:-129px;
}

/* style the table so that it takes no ppart in the layout - required for IE to work */
table {
  position:absolute;
  top:0px;
  left:0px;
}

/* style the second level links */
.menu ul ul a, .menu ul ul a:visited {
  background: #e2dfa8; 
  font-size: 0.7em;
  color: maroon; 
  height: auto; 
  line-height: 1em; 
  padding: 5px 10px; 
  width: 129px

/* yet another hack for IE5.5 */
}
* html .menu ul ul a{
width:150px;
w\idth:129px;
}

/* style the top level hover */
.menu a:hover, .menu ul ul a:hover{
  color: #fff; 
  background: #8c0003;
}

/* make the second level visible when hover on first level list OR link */
.menu ul :hover ul{
  visibility:visible; 
}

/* keep the third level hidden when you hover on first level list OR link */
.menu ul :hover ul ul{
  visibility:hidden;
}

/* keep the fourth level hidden when you hover on second level list OR link */
.menu ul :hover ul :hover ul ul{
  visibility:hidden;
}

/* make the third level visible when you hover over second level list OR link */
.menu ul :hover ul :hover ul{ 
  visibility:visible;
}

/* make the fourth level visible when you hover over third level list OR link */
.menu ul :hover ul :hover ul :hover ul { 
  visibility:visible;
}

.footer {
  position: absolute;
  width: 200px;
  bottom: 15px;
  right: 15px;
  text-align: right;
  padding-right: 10px;
}

a.foot,a.foot:active,a.foot:visited {
  color: maroon;
}

a.foot:hover {
  background: maroon;
  color: #fff;
}

.copyright {
  top: 50%;
  left: 50%;
  width: 800px;
  height: 35px;
  margin-top: 235px;
  margin-left: -400px;
  text-align: center;
  font-weight: bold;
  font-size: 0.85em;
}

/* Picture.css */

/* default link style - needed to make the :active work correctly in IE */
a, a:visited, a:hover, a:active {
  color: maroon;
}

/* style the outer containing div to fit the landscape, portrait and buttons */
#album {
  width: 250px; 
  height: 300px; 
  background: #eee;
  border: 1px solid #aaa;
  margin: 0 auto;
  margin-top: 10px;
}

/* remove the padding margin and bullets from the list. Add a top margin and width to fit the images and a position relative */
.gallery {
  padding: 0; 
  margin: 300px 0 0 0; 
  list-style-type: none; 
  position: relative; 
  width: 250px;
  padding-left: 30px;
}

/* remove the default image border */
.gallery img {
  border: 0;
}

/* make the list horizontal */
.gallery li {
  float: left;
}

/* style the link text to be central in a surrounding box */
.gallery li a, .gallery li a:visited {
  font-size: 0.8em;
  float: left; 
  text-decoration: none; 
  color: maroon; 
  background: #e2dfa8; 
  text-align: center;  
  width: 26px; 
  height: 26px; 
  line-height: 24px; 
  border: 2px solid #fff;
  margin: 2px;
}

/* position the images using an absolute position and hide them from view */
.gallery li a img {
  position:absolute;
  padding: 5px; 
  top: -275px; 
  left: 15; 
  visibility: hidden; 
  border: 0;
}

/* fix the top position for the landscape images */
.gallery li a img.landscape {
  top:-300px;
}

/* fix the left position for the portrait images */
.gallery li a img.portrait {
  left:60px;
}

/* style the hover background color for the text boxes */
.gallery li a:hover {
  background: #8c0003;
  color: #fff;
}

/* style the active/focus colors for the text boxes (required for IE) */
.gallery li a:active, .gallery li a:focus {
  background: maroon; 
  color: #fff;
}

/* make the images visible on active/focus */
.gallery li a:active img, .gallery li a:focus img {
  visibility:visible;
}
</style>
```

Und hier der restl. HTML Text

```
<HTML>
<HEAD>
    <TITLE>www.stefis-ecke.de</TITLE>
    <!--<LINK rel="stylesheet" type="text/css" href="css/ie.css">-->
</HEAD>
<BODY>
<div id="container_rahmen">
<div id="container">

<div class="menu">
<!-- BEGINN EBENE EINS -->
  <ul>
   <li><a class="drop" style="width: 150px;" href="#">Home

<!-- BEGINN EBENE ZWEI -->
       <!--[if IE 7]><!--></a><!--<![endif]-->
<!-- Hier wieder einfügen, wenn benötigt -->
       <!--[if lte IE 6]></a><![endif]-->
<!--   ENDE EBENE ZWEI -->

   </li>
   <li><a href="#" style="width: 150px;" >About ..

<!-- BEGINN EBENE ZWEI -->
       <!--[if IE 7]><!--></a><!--<![endif]-->
       <table><tr><td>
           <ul>
            <li><a href="#" title="sub01_10">.. Person1</a></li>
            <li><a href="#" title="sub01_11">.. Person2</a></li>
            <li><a class="drop" href="#" 
                   title="sub01_12">.. TiereXY»

<!-- BEGINN EBENE DREI -->                
                <!--[if IE 7]><!--></a><!--<![endif]-->
                <table><tr><td>
                    <ul>
                     <li><a href="#"
                            title="Der König unter den... Faulenzern">Leo</a></li>
                     <li><a href="#" 
                            title="Sag niemals, dass sie langsam sind">Die 'Törtels' »

<!-- BEGINN EBENE VIER -->
                         <!--[if IE 7]><!--></a><!--<![endif]-->
                         <table><tr><td>
                             <ul>
                              <li><a href="#" title="Hübsch und begehrt">Penny</a></li>
                              <li><a href="#" title="Will immer nur das eine">Schildi</a></li>
                              <li><a href="#" title="Nich' ganz grade">Mike</a></li>
                              <li><a href="#" title="Noch n Kerl">Scott</a></li>
                              <li><a href="#" title="NOCH das Nesthäckchen">Trippli</a></li>
                              <li><a href="#" title="just unknown">Die Eier</a></li>
                             </ul>
                         </td></tr></table>
                         <!--[if lte IE 6]></a><![endif]-->
<!--   ENDE EBENE VIER -->

                     </li>
                     <li><a href="#" 
                            title="Du wirst dir Ohrstöpsel wünschen">Die 'Bördies' »

<!-- BEGINN EBENE VIER -->
                         <!--[if IE 7]><!--></a><!--<![endif]-->
                         <table><tr><td>
                             <ul>
                              <li><a href="#" title="Herrin im Käfig">Spok</a></li>
                              <li><a href="#" title="Herr im Käfig">Specht</a></li>
                              <li><a href="#" title="Der Bruchpilot">Quacks</a></li>
                              <li><a href="#" title="Unser Krüppelchen">Freitag</a></li>
                              <li><a href="#" title="Sehr bezeichnender Name">Noname</a></li>
                              <li><a href="#" title="Bösartiges Biest">Stummelchen</a></li>
                              <li><a href="#" title="Großes Maul nix dahinter">Freddie</a></li>
                              <li><a href="#" title="Zarte Seele">Bomber</a></li>
                              <li><a href="#" title="Sollte Mama werden">Samstag</a></li>
                             </ul>
                         </td></tr></table>
                         <!--[if lte IE 6]></a><![endif]-->
<!--   ENDE EBENE VIER -->

                     </li>
                    </ul>
                </td></tr></table>
                <!--[if lte IE 6]></a><![endif]-->
<!--   ENDE EBENE DREI -->

            </li>
           </ul>
       </td></tr></table>
       <!--[if lte IE 6]></a><![endif]-->
<!--   ENDE EBENE ZWEI -->

   </li>
   <li><a href="main03_start.html" style="width: 150px;" >Was ich lese..<!--[if IE 7]>
                
<!-- BEGINN EBENE ZWEI -->
       <!--></a><!--<![endif]-->
       <table><tr><td>
           <ul>
            <li><a class="drop" href="#" title="Thriller">Thriller »

<!-- BEGINN EBENE DREI -->
                <!--[if IE 7]><!--></a><!--<![endif]-->
                <table><tr><td>
                    <ul>
                     <li><a href="#" title="Karin Slaughter"   >"Belladonna"</a></li>
                     <li><a href="#" title="Karin Slaughter"   >"Vergiss mein nicht"</a></li>
                     <li><a href="#" title="Dan Brown"         >"Meteor"</a></li>
                     <li><a href="#" title="Dan Brown"         >"Sakrileg"</a></li>
                     <li><a href="#" title="Dan Brown"         >"Illuminati"</a></li>
                     <li><a href="#" title="Mark T. Sullivan"  >"Toxic"</a></li>
                     <li><a href="#" title="James W. Nichol"   >"Ausgesetzt"</a></li>
                     <li><a href="#" title="Giles Blunt"       >"Gefrorene Seelen"</a></li>
                    </ul>
                </td></tr></table>
                <!--[if lte IE 6]></a><![endif]-->
<!--   ENDE EBENE DREI -->

            </li>
            <li><a class="drop" href="#" title="Roman">Roman »

<!-- BEGINN EBENE DREI -->
                <!--[if IE 7]><!--></a><!--<![endif]-->
                <table><tr><td>
                    <ul>
                     <li><a href="#" title="Patrick Süsskind"  >"Das Parfüm"</a></li>
                     <li><a href="#" title="Mary Higgins Clark">"Mein ist die Stunde der Nacht"</a></li>
                     <li><a href="#" title="Justine Wilson"    >"Bloodangel"</a></li>
                     <li><a href="#" title="Robin Cook"        >"Tauchstation"</a></li>
                     <li><a href="#" title="Karin Slaughter"   >"Dreh dich nicht um"</a></li>
                     <li><a href="#" title="Stephen King"      >"Stark"</a></li>
                     <li><a href="#" title="Stephen King"      >"Puls"</a></li>
                     <li><a href="#" title="Frank Schätzing"   >"Der Schwarm"</a></li>
                     <li><a href="#" title="Sergej Lukianenko" >"Wächter des Tages"</a></li>
                     <li><a href="#" title="Sergej Lukianenko" >"Wächter der Nacht"</a></li>
                     <li><a href="#" title="Karin Slaughter"   >"Schattenblume"</a></li>
                    </ul>
                </td></tr></table>
                <!--[if lte IE 6]></a><![endif]-->
<!--   ENDE EBENE DREI -->

            </li>
            <li><a class="drop" href="#" title="Krimi">Krimi »

<!-- BEGINN EBENE DREI -->
                <!--[if IE 7]><!--></a><!--<![endif]-->
                <table><tr><td>
                    <ul>
                     <li><a href="#" title="Declan Hughes"     >"Blut von meinem Blut"</a></li>
                    </ul>
                </td></tr></table>
                <!--[if lte IE 6]></a><![endif]-->
<!--   ENDE EBENE DREI -->

            </li>
           </ul>
       </td></tr></table>
       <!--[if lte IE 6]></a><![endif]-->
<!--   ENDE EBENE ZWEI -->

   </li>
   <li><a href="#" style="width: 150px;">Bilder

<!-- BEGINN EBENE ZWEI -->
       <!--[if IE 7]><!--></a><!--<![endif]-->
       <table><tr><td>
           <ul>
            <li><a href="#" title="Football-Spiel">Longhorns vs Knights</a></li>
            <li><a href="#" title="sub01_27">sub01_27</a></li>
            <li><a href="#" title="sub01_28">sub01_28</a></li>
           </ul>
       </td></tr></table>
       <!--[if lte IE 6]></a><![endif]-->
<!--   ENDE EBENE ZWEI -->

   </li>
   <li><a href="#" style="width: 150px;">Links

<!-- BEGINN EBENE ZWEI -->
       <!--[if IE 7]><!--></a><!--<![endif]-->
       <table><tr><td>
           <ul>
            <li><a href="#" title="Fanclub der Mannheimer Adler">Die Inseladler</a></li>
            <li><a href="#" title="Eishockey Mannschaft">Die Mannheimer Adler</a></li>
            <li><a href="#" title="Online-Hilfe zur Webgestaltung, etc.">Tutorials.de</a></li>
            <li><a href="#" title="Online-Game">Ogame</a></li>
           </ul>
        </td></tr></table>
        <!--[if lte IE 6]></a><![endif]-->
<!--   ENDE EBENE ZWEI -->

    </li>
   </ul>
<!--   ENDE EBENE EINS -->
</div>


<div id="ueberschrift"></div>
<div id="album">
    <ul class="gallery">
      <li>
        <a href="#nogo">01
          <img class="landscape" 
               src="pic/rose_in_glas.jpg"
               alt="landscape image 1" 
               title="landscape image 1"/>
        </a>
      </li>
      <li>
        <a href="#nogo">02
          <img class="landscape" 
               src="gallery/landscape_2.jpg" 
               alt="landscape image 2"
               title="landscape image 2"/>
        </a>
      </li>
      <li>
        <a href="#nogo">03
          <img class="portrait" 
               src="gallery/portrait_1.jpg"
               alt="portrait image 1"
               title="portrait image 1"/>
        </a>
      </li>
      <li>
        <a href="#nogo">04
          <img class="portrait" 
               src="gallery/portrait_2.jpg" 
               alt="portrait image 2"
               title="portrait image 2"/>
        </a>
      </li>
      <li>
        <a href="#nogo">05
          <img class="landscape" 
               src="gallery/landscape_3.jpg" 
               alt="landscape image 3" 
               title="landscape image 3"/>
        </a>
      </li>
      <li>
        <a href="#nogo">»
          <img class="landscape" 
               src="gallery/landscape_3.jpg" 
               alt="landscape image 3" 
               title="landscape image 3"/>
        </a>
      </li>
    </ul>
</div>
<div class="footer">
  <a class="foot" href="#" title="Kontakt">Kontakt</a>
  <a class="foot" href="#" title="Impressum">Impressum</a>
</div>
</div>
</div>
<div class="copyright">© by Stefanie<br>2006</div>
</BODY>
</HTML>
```

Am besten mal ein Bild von 240x180 einfügen und testen. "Home" hat keine weiteren Links, deswegen betrifft es im Moment nur "About.."


----------



## Maik (23. August 2006)

Auf den ersten Blick kann ich dir nur mitteilen, daß die Seite bei mir scheinbar nur im IE fehlerfrei dargestellt wird, in allen anderen Browsern (Firefox, Mozilla, Netscape und Opera) ist das Layout verschoben. Das Dropdown-Menü funktioniert zudem im Firefox- und Mozilla-Browser überhaupt nicht.

Meine Testumgebung: Win2k, FF 1.5.0.6, IE 6.0, MOZ 1.7.12, NN 7.0, OP 8.50

Zu guter letzt stellt sich mir die Frage, wieso die Submenüs die Bilder (im DIV *#album*?) eigentlich nicht überdecken sollen?


----------



## Stoffelchen (24. August 2006)

ich hab nicht gesagt, dass die bilder sie nicht NICHT überdecken sollen, sondern genau das, was du gesagt hast.

Im IE wird es bei mir nur so dargestellt, dass die Bilder die Submenüs überdecken und DAS will ich nicht. 

Was die Funktionalität angeht, weiß ich, dass es in den anderen Browsern noch verschoben ist. Das kommt daher, weil ich die meiste Zeit an einem Rechner sitze, bei welchem ich keine administrativen Rechte (somit keine anderen browser installieren kann) und nur den IE habe (-->bin auf Arbeit ).

Das das ddm im FF gar nicht geht, find ich nicht so toll -.- ... weißt du zufällig woran das liegt? Ich schau nachher selber nochmal drüber, aber vllt bist du ja schneller als ich ^^

Danke schonmal für deine Hilfe und Mühe


----------



## Maik (24. August 2006)

Ich habe mal testweise eine Grafik in das DIV *#album* eingesetzt. Im IE (6.0, Win2k) überdeckt sie das Submenü nicht - siehe Anhang.

Warum Stu Nicholls' Dropdown-Menü in deiner Seite im Firefox- und Mozilla-Browser nicht mehr funktioniert, kann ich derzeit nicht so recht nachvollziehen. Dazu müßte ich erstmal deinen Quellcode mit dem Original vergleichen. Vielleicht hängt es aber auch damit zusammen, daß die Seite in den genannten Browsern grundsätzlich falsch dargestellt wird.

Da ich gerade Mittagspause habe und demnächst wieder los muß, fehlt mir für eine Fehleranalyse die notwendige Zeit.



Spoiler



.


----------



## Stoffelchen (24. August 2006)

Keine Hektik  ... eilt ja nicht... notfalls such ich mir was anderes...


----------



## Maik (24. August 2006)

Keine Sorge, ich werde hier jetzt sicherlich nicht in Hektik verfallen 

Werde mir den Quellcode heute Abend mal in aller Ruhe anschauen.


----------



## Maik (24. August 2006)

Habe den HTML- und CSS-Code soweit überarbeitet, und das Layout wird nun in allen mir zur Verfügung stehenden Browsern einheitlich dargestellt. Testumgebung: Win2k, FF 1.5.0.6, IE 6.0, MOZ 1.7.12, NN 7.0, OP 8.50


```
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml2/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>www.stefis-ecke.de</title>
    <link rel="stylesheet" type="text/css" href="layout.css" />
</head>
<body>
<div id="container_rahmen">
<div id="container">

<div class="menu">
<!-- BEGINN EBENE EINS -->
  <ul>
   <li><a class="drop" href="#">Home

<!-- BEGINN EBENE ZWEI -->
       <!--[if IE 7]><!--></a><!--<![endif]-->
<!-- Hier wieder einfügen, wenn benötigt -->
       <!--[if lte IE 6]></a><![endif]-->
<!--   ENDE EBENE ZWEI -->

   </li>
   <li><a href="#">About ..

<!-- BEGINN EBENE ZWEI -->
       <!--[if IE 7]><!--></a><!--<![endif]-->
       <table><tr><td>
           <ul>
            <li><a href="#" title="sub01_10">.. Person1</a></li>
            <li><a href="#" title="sub01_11">.. Person2</a></li>
            <li><a class="drop" href="#"
                   title="sub01_12">.. TiereXY»

<!-- BEGINN EBENE DREI -->
                <!--[if IE 7]><!--></a><!--<![endif]-->
                <table><tr><td>
                    <ul>
                     <li><a href="#"
                            title="Der König unter den... Faulenzern">Leo</a></li>
                     <li><a href="#"
                            title="Sag niemals, dass sie langsam sind">Die 'Törtels' »

<!-- BEGINN EBENE VIER -->
                         <!--[if IE 7]><!--></a><!--<![endif]-->
                         <table><tr><td>
                             <ul>
                              <li><a href="#" title="Hübsch und begehrt">Penny</a></li>
                              <li><a href="#" title="Will immer nur das eine">Schildi</a></li>
                              <li><a href="#" title="Nich' ganz grade">Mike</a></li>
                              <li><a href="#" title="Noch n Kerl">Scott</a></li>
                              <li><a href="#" title="NOCH das Nesthäckchen">Trippli</a></li>
                              <li><a href="#" title="just unknown">Die Eier</a></li>
                             </ul>
                         </td></tr></table>
                         <!--[if lte IE 6]></a><![endif]-->
<!--   ENDE EBENE VIER -->

                     </li>
                     <li><a href="#"
                            title="Du wirst dir Ohrstöpsel wünschen">Die 'Bördies' »

<!-- BEGINN EBENE VIER -->
                         <!--[if IE 7]><!--></a><!--<![endif]-->
                         <table><tr><td>
                             <ul>
                              <li><a href="#" title="Herrin im Käfig">Spok</a></li>
                              <li><a href="#" title="Herr im Käfig">Specht</a></li>
                              <li><a href="#" title="Der Bruchpilot">Quacks</a></li>
                              <li><a href="#" title="Unser Krüppelchen">Freitag</a></li>
                              <li><a href="#" title="Sehr bezeichnender Name">Noname</a></li>
                              <li><a href="#" title="Bösartiges Biest">Stummelchen</a></li>
                              <li><a href="#" title="Großes Maul nix dahinter">Freddie</a></li>
                              <li><a href="#" title="Zarte Seele">Bomber</a></li>
                              <li><a href="#" title="Sollte Mama werden">Samstag</a></li>
                             </ul>
                         </td></tr></table>
                         <!--[if lte IE 6]></a><![endif]-->
<!--   ENDE EBENE VIER -->

                     </li>
                    </ul>
                </td></tr></table>
                <!--[if lte IE 6]></a><![endif]-->
<!--   ENDE EBENE DREI -->

            </li>
           </ul>
       </td></tr></table>
       <!--[if lte IE 6]></a><![endif]-->
<!--   ENDE EBENE ZWEI -->

   </li>
   <li><a href="main03_start.html">Was ich lese..<!--[if IE 7]>

<!-- BEGINN EBENE ZWEI -->
       <!--></a><!--<![endif]-->
       <table><tr><td>
           <ul>
            <li><a class="drop" href="#" title="Thriller">Thriller »

<!-- BEGINN EBENE DREI -->
                <!--[if IE 7]><!--></a><!--<![endif]-->
                <table><tr><td>
                    <ul>
                     <li><a href="#" title="Karin Slaughter"   >"Belladonna"</a></li>
                     <li><a href="#" title="Karin Slaughter"   >"Vergiss mein nicht"</a></li>
                     <li><a href="#" title="Dan Brown"         >"Meteor"</a></li>
                     <li><a href="#" title="Dan Brown"         >"Sakrileg"</a></li>
                     <li><a href="#" title="Dan Brown"         >"Illuminati"</a></li>
                     <li><a href="#" title="Mark T. Sullivan"  >"Toxic"</a></li>
                     <li><a href="#" title="James W. Nichol"   >"Ausgesetzt"</a></li>
                     <li><a href="#" title="Giles Blunt"       >"Gefrorene Seelen"</a></li>
                    </ul>
                </td></tr></table>
                <!--[if lte IE 6]></a><![endif]-->
<!--   ENDE EBENE DREI -->

            </li>
            <li><a class="drop" href="#" title="Roman">Roman »

<!-- BEGINN EBENE DREI -->
                <!--[if IE 7]><!--></a><!--<![endif]-->
                <table><tr><td>
                    <ul>
                     <li><a href="#" title="Patrick Süsskind"  >"Das Parfüm"</a></li>
                     <li><a href="#" title="Mary Higgins Clark">"Mein ist die Stunde der Nacht"</a></li>
                     <li><a href="#" title="Justine Wilson"    >"Bloodangel"</a></li>
                     <li><a href="#" title="Robin Cook"        >"Tauchstation"</a></li>
                     <li><a href="#" title="Karin Slaughter"   >"Dreh dich nicht um"</a></li>
                     <li><a href="#" title="Stephen King"      >"Stark"</a></li>
                     <li><a href="#" title="Stephen King"      >"Puls"</a></li>
                     <li><a href="#" title="Frank Schätzing"   >"Der Schwarm"</a></li>
                     <li><a href="#" title="Sergej Lukianenko" >"Wächter des Tages"</a></li>
                     <li><a href="#" title="Sergej Lukianenko" >"Wächter der Nacht"</a></li>
                     <li><a href="#" title="Karin Slaughter"   >"Schattenblume"</a></li>
                    </ul>
                </td></tr></table>
                <!--[if lte IE 6]></a><![endif]-->
<!--   ENDE EBENE DREI -->

            </li>
            <li><a class="drop" href="#" title="Krimi">Krimi »

<!-- BEGINN EBENE DREI -->
                <!--[if IE 7]><!--></a><!--<![endif]-->
                <table><tr><td>
                    <ul>
                     <li><a href="#" title="Declan Hughes"     >"Blut von meinem Blut"</a></li>
                    </ul>
                </td></tr></table>
                <!--[if lte IE 6]></a><![endif]-->
<!--   ENDE EBENE DREI -->

            </li>
           </ul>
       </td></tr></table>
       <!--[if lte IE 6]></a><![endif]-->
<!--   ENDE EBENE ZWEI -->

   </li>
   <li><a href="#">Bilder

<!-- BEGINN EBENE ZWEI -->
       <!--[if IE 7]><!--></a><!--<![endif]-->
       <table><tr><td>
           <ul>
            <li><a href="#" title="Football-Spiel">Longhorns vs Knights</a></li>
            <li><a href="#" title="sub01_27">sub01_27</a></li>
            <li><a href="#" title="sub01_28">sub01_28</a></li>
           </ul>
       </td></tr></table>
       <!--[if lte IE 6]></a><![endif]-->
<!--   ENDE EBENE ZWEI -->

   </li>
   <li><a href="#">Links

<!-- BEGINN EBENE ZWEI -->
       <!--[if IE 7]><!--></a><!--<![endif]-->
       <table><tr><td>
           <ul>
            <li><a href="#" title="Fanclub der Mannheimer Adler">Die Inseladler</a></li>
            <li><a href="#" title="Eishockey Mannschaft">Die Mannheimer Adler</a></li>
            <li><a href="#" title="Online-Hilfe zur Webgestaltung, etc.">Tutorials.de</a></li>
            <li><a href="#" title="Online-Game">Ogame</a></li>
           </ul>
        </td></tr></table>
        <!--[if lte IE 6]></a><![endif]-->
<!--   ENDE EBENE ZWEI -->

    </li>
   </ul>
<!--   ENDE EBENE EINS -->
</div>


<div id="ueberschrift"></div>
<div id="album">
    <ul class="gallery">
      <li>
        <a href="#nogo">01
          <img class="landscape"
               src="pic/rose_in_glas.jpg"
               alt="landscape image 1"
               title="landscape image 1"/>
        </a>
      </li>
      <li>
        <a href="#nogo">02
          <img class="landscape"
               src="gallery/landscape_2.jpg"
               alt="landscape image 2"
               title="landscape image 2"/>
        </a>
      </li>
      <li>
        <a href="#nogo">03
          <img class="portrait"
               src="gallery/portrait_1.jpg"
               alt="portrait image 1"
               title="portrait image 1"/>
        </a>
      </li>
      <li>
        <a href="#nogo">04
          <img class="portrait"
               src="gallery/portrait_2.jpg"
               alt="portrait image 2"
               title="portrait image 2"/>
        </a>
      </li>
      <li>
        <a href="#nogo">05
          <img class="landscape"
               src="gallery/landscape_3.jpg"
               alt="landscape image 3"
               title="landscape image 3"/>
        </a>
      </li>
      <li>
        <a href="#nogo">»
          <img class="landscape"
               src="gallery/landscape_3.jpg"
               alt="landscape image 3"
               title="landscape image 3"/>
        </a>
      </li>
    </ul>
</div>
<div class="footer">
  <a class="foot" href="#" title="Kontakt">Kontakt</a>
  <a class="foot" href="#" title="Impressum">Impressum</a>
</div>
</div>
</div>
<div class="copyright">© by Stefanie<br>2006</div>
</body>
</html>
```

*layout.css*:

```
body {
  font-family: Arial, Tahoma;
  font-size: 0.8em;
  background: bbb;
  line-height: 1.6em;
}

hr {
  margin-top: -7px;
  color: maroon;
}

#container_rahmen, .copyright {
  position: absolute;
}

#container_rahmen {
  background: #fff;
  top: 50%;
  left: 50%;
  width: 770px;
  height: 420px;
  margin-top: -225px;
  margin-left: -400px;
  padding: 15px;
  border-bottom: #6f6f6f  solid 1px;
  border-right: #6f6f6f solid 1px;
}

#container {
  background: #efefef;
  width: 750px;
  height: 400px;
  border-top: #6f6f6f solid 1px;
  border-left:  #6f6f6f solid 1px;
  border-bottom: #bbb solid 1px;
  border-right: #bbb solid 1px;
  padding: 10px;
}

#bild {
  float:left;
  margin-right: 15px;
  
}

#ueberschrift {
  font-size: 2em;
  font-family:  Quark Neon, Arial;
}

/* style the outer div to give it width */
.menu {
width:750px; 
font-size:0.85em;
border-top: 2px solid maroon;
padding-bottom: 45px !important;
padding-bottom: 10px;
position:relative;
z-index: 2;
}
/* remove all the bullets, borders and padding from the default list styling */
.menu ul {
padding:0;
margin:0;
list-style-type:none;
}
.menu ul ul {
width:150px;
}
/* float the list to make it horizontal and a relative positon so that you can control the dropdown 

menu positon */
.menu li {
float:left;
width:150px;
position:relative;
}
/* style the links for the top level */
.menu a, .menu a:visited {
display:block;
font-size:11px;
text-decoration:none; 
color:#fff; 
width:139px; 
height:30px; 
border:1px solid #fff; 
border-width:1px 1px 0 0; 
background:maroon; 
padding-left:10px; 
line-height:29px;
}
/* a hack so that IE5.5 faulty box model is corrected */
* html .menu a, * html .menu a:visited {
width:149px;
w\idth:139px;
}

/* style the second level background */
.menu ul ul a.drop, .menu ul ul a.drop:visited {
background:maroon;
color: #fff;
}
/* style the second level hover */
.menu ul ul a.drop:hover{
background:maroon;
}
/* style the third level background */
.menu ul ul ul a, .menu ul ul ul a:visited {
background:#e2dfa8;
}
/* style the third level hover */
.menu ul ul ul a:hover {
background:maroon;
}

/* hide the sub levels and give them a positon absolute so that they take up no room */
.menu ul ul {
visibility:hidden;
position:absolute;
height:0;
top:31px;
left:0; 
width:150px;
}
/* another hack for IE5.5 */
* html .menu ul ul {
top:30px;
t\op:31px;
}

/* position the third level flyout menu */
.menu ul ul ul{
left:150px; 
top:0;
width:150px;
}
/* position the third level flyout menu for a left flyout */
.menu ul ul ul.left {
left:-150px;
}

/* style the table so that it takes no ppart in the layout - required for IE to work */
table {position:absolute; top:0; left:0;}

/* style the second level links */
.menu ul ul a, .menu ul ul a:visited {
background:#e2dfa8; 
color:maroon; 
height:auto; 
line-height:1em; 
padding:5px 10px; 
width:129px
/* yet another hack for IE5.5 */
}
* html .menu ul ul a{
width:150px;
w\idth:129px;
}


/* style the top level hover */
.menu a:hover, .menu ul ul a:hover{
color:#fff; 
background:#8c0003;
}

/* make the second level visible when hover on first level list OR link */
.menu ul :hover ul{
visibility:visible; 
}
/* keep the third level hidden when you hover on first level list OR link */
.menu ul :hover ul ul{
visibility:hidden;
}
/* keep the fourth level hidden when you hover on second level list OR link */
.menu ul :hover ul :hover ul ul{
visibility:hidden;
}
/* make the third level visible when you hover over second level list OR link */
.menu ul :hover ul :hover ul{ 
visibility:visible;
}
/* make the fourth level visible when you hover over third level list OR link */
.menu ul :hover ul :hover ul :hover ul { 
visibility:visible;
}

.footer {
  position: absolute;
  width: 190px;
  bottom: 15px;
  right: 15px;
  text-align: right;
  padding-right: 10px;
}

a.foot,a.foot:active,a.foot:visited {
  color: maroon;
}

a.foot:hover {
  background: maroon;
  color: #fff;
}

.copyright {
  top: 50%;
  left: 50%;
  width: 800px;
  height: 35px;
  margin-top: -17.5px;
  margin-left: -400px;
  text-align: center;
  font-weight: bold;
  font-size: 0.85em;
}

/* Picture.css */

/* default link style - needed to make the :active work correctly in IE */
a, a:visited, a:hover, a:active {
  color: maroon;
}

/* style the outer containing div to fit the landscape, portrait and buttons */
#album {
  width: 250px;
  height: 300px;
  background: #eee;
  border: 1px solid #aaa;
  margin: 0 auto;
  margin-top: 10px;
}

/* remove the padding margin and bullets from the list. Add a top margin and width to fit the images 

and a position relative */
.gallery {
  padding: 0;
  margin: 260px 0 0 0;
  list-style-type: none;
  position: relative;
  width: 220px;
  padding-left: 30px;
  z-index:1;
}

/* remove the default image border */
.gallery img {
  border: 0;
  display: block;
  float:left;
}

/* make the list horizontal */
.gallery li {
  float: left;
}

/* style the link text to be central in a surrounding box */
.gallery li a, .gallery li a:visited {
  font-size: 0.8em;
  float: left;
  text-decoration: none;
  color: maroon;
  background: #e2dfa8;
  text-align: center;
  width: 26px;
  height: 26px;
  line-height: 24px;
  border: 2px solid #fff;
  margin: 2px;
}

/* position the images using an absolute position and hide them from view */
.gallery li a img {
  position:absolute;
  padding: 5px;
  top: -275px;
  left: 15px;
  visibility: hidden;
  border: 0;
}

/* fix the top position for the landscape images */
.gallery li a img.landscape {
  top:-300px;
}

/* fix the left position for the portrait images */
.gallery li a img.portrait {
  left:60px;
}

/* style the hover background color for the text boxes */
.gallery li a:hover {
  background: #8c0003;
  color: #fff;
}

/* style the active/focus colors for the text boxes (required for IE) */
.gallery li a:active, .gallery li a:focus {
  background: maroon;
  color: #fff;
}

/* make the images visible on active/focus */
.gallery li a:active img, .gallery li a:focus img {
  visibility:visible;
}
```
Während dem Modifizieren des CSS-Codes habe ich herausgefunden, daß du wohl die unteren grafischen Navi-Buttons gemeint hast, und den Darstellungsfehler im IE mit den entsprechenden z-index-Werten für die Klassen *.menu* und *.gallery* behoben, so daß die Grafiken die Submenüs nun nicht mehr überdecken.

Mir ist aber leider auch aufgefallen, daß Stu Nicholls'  Dropdown-Menü in der Originalversion im Opera (8.50) überhaupt nicht und im Netscape (7.0) fehlerhaft ausgeführt wird!


----------

