Einstellungen von drop down feldern

[Steve]

Hallo,

ich hab ein problem mit meiner drop down menüleiste, die menüleiste habe ich mit etwas hilfe aus dem internet und mit meinen kenntnissen erstellt.
Wenn ich auf ein übermenüpunkt wie Home oder Weine gehe kommen ja die felder, doch sie überlappen dann ein bisschen den Übermenüpunkt(Home), wo kann ich es umstellen, also das die überlappung weg geht? bitte um hilfe
Quelltext der Menüleiste:

/* Breite der Menüpunkte  */
ul#dm li {
  width: 150px;
}

/* Erscheinungsbild der Menüpunkte */
ul#dm a {
  text-decoration: none;
  background: #7A0A29;/*Hintergrundfarbe*/
  border-top: 1px solid #EEE;
  border-left: 1px solid #EEE;
  border-right: 1px solid #BBB;
  border-bottom: 1px solid #BBB; /*Linienstärke unten*/
  padding: 5px 10px; /*Höhe der Felder*/
  color: #ffffff; /*Schriftfarbe*/
  font: bold 18px Times New Roman,sans-serif; /*schriftart schriftgröße*/
}

/* Erscheinungsbild eines Menüpunkts bei Mouseover */
ul#dm a:hover {
  background: #ffffff; /* Farbe des markierten Feldes*/
  border-top: 1px solid #BBB;/*Farbe der Linien*/
  border-left: 1px solid #BBB;
  border-right: 1px solid #EEE;
  border-bottom: 1px solid #EEE;
  color: #000000;/*Farbe der Schrift nach markierten Feldes*/
}

/* ------------------------------------------------------------------- */

ul#dm {
  margin: 0;
  padding: 0;
  list-style-type: none;
}
ul#dm li {
  padding: 0;
  margin: 0;
  float: left;
  position: relative;
}
ul#dm a {
  display: block;
  width: 100%;
}
ul#dm li>a {
  width: auto;
}

ul#dm li ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
  visibility: hidden;
  position: absolute;
  left: 0px;
  top: 21px;
}
ul#dm li li {
  float: left;
  clear: left;
}
ul#dm li>li {
  float: none;
}