Stacking a dropdown menu over a picture

I'm currently building a new website, and i'm having some problems with my drop-down menu. As you can see on the screenshot - a part of the menu goes behind the picture/image, instead of being in front of it. I have tried a lot of things to get this to work, but without any luck.

I hope to find someone who can help me with getting it to work.

Index file (DropDown.html):

<html>

<body>
  <img src="nnh-logo.gif" alt="nnh-logo" height="70" width="298">
</body>


<head>
  <title>Nielsen & Nielsen Holding</title>
  <link href="style.css" rel="stylesheet" type="text/css" />
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>

<body>
  </div>

  <ul class="dropdown">
    <li>
      <a href="#">Firmaer</a>
      <ul>
        <li><a href="http://nielsen-nielsen.dk/">Nielsen & Nielsen</a>
        </li>
        <li><a href="http://www.micro-matic.com/">Micro Matic A/S</a>
        </li>
        <li><a href="http://www.senmatic.dk/">Senmatic A/S</a>
        </li>
        <li><a href="http://www.nassau.dk/">Nassau A/S</a>
        </li>
        <li><a href="http://www.triax.dk/">Triax A/S</a>
        </li>
        <li><a href="http://www.triaxsystems.dk/">Triax Systems A/S</a>
        </li>
    </li>
    </ul>
    <li>
      <a href="http://www.micro-matic.dk/Jobs/job.htm">Jobs</a>
    </li>
    <li>
      <a href="http://www.micro-matic.dk/holding/images/Holding%20Profil%20Brochure.pdf">Group profile</a>
  </ul>
  </li>
  </ul>
  </li>
  </ul>
  </div>
</body>


<body>
  <img src="trappe.jpg" style="position: absolute; top: 200px; left: 10px; alt=" trappe " height="300 " width="300 "> 
  </body>
</html>

Style file (style.css):

/* CSS Tweaks */
* {padding:0;margin:0;}
a img {border:0;}
.clear {clear:both;}

body {font-family:Arial;font-size:12px;padding:20px;}

.info {padding:10px;background:#f1f1f1;border:1px dotted #ccc;margin-bottom:10px;}
.info strong {display:block;}

.dropdown {list-style:none;}
.dropdown li {list-style:none;position:relative;}
.dropdown li a {display:block;padding:0 10px;text-decoration:none;font-weight:bold;height:30px;line-height:30px;}

.dropdown > li {float:left;}
.dropdown > li > a {float:left;background:#333;color:#fff;border-left:1px solid #ccc;}
.dropdown > li > a:hover,.dropdown > li:hover > a {background:#666;}

.dropdown > li ul {display:none;}

.dropdown > li:hover > ul {display:block;width:211px;position:absolute;left:0;top:25px;}
.dropdown > li > ul > li > a {display:block;background:#444;color:#ccc;}
.dropdown > li > ul > li > a:hover,.dropdown > li ul > li:hover > a {background:#666;color:#fff;}

.dropdown > li ul > li:hover > ul {display:block;width:200px;position:absolute;left:200px;top:0; z-index: 9999;}
.dropdown > li > ul > li > ul > li a {display:block;background:#555;color:#ccc;}
.dropdown > li > ul > li > ul > li a:hover {background:#444;color:#fff;}

The problem is probably that the image gets loaded later in the hierarchy of the page and it therefore gets overlays whatever DIV is loaded before that one.

Try playing with the z-index.

Add z-index: -99 to the img-style and add z-index: 99 to the .dropdown in your css.