Dropdown-menüpunkte überlappen

anjaaa · 23 September 2013

Hallo zusammen!

Ich bin ein relativer Anfänger was Websites und so angeht aber jetzt muss ich eine zur Matura (komme aus Österreich) machen und habe ein Problem...
....bei meinem dropdown-menü werden die unterpunkte zwar angezeigt aber sie überlappen die hauptmenü punkte.
Hier mein Code:

<title>Menü</title>
<link rel="stylesheet" type="text/css" href="dropdown-menu.css">
<script type="text/javascript" src="dropdown-menu.js"></script>
</head>

<body onload="dm_init()">
<ul id="dm">
<li>
<a href="">Menupunkt 1</a>
<ul>
<li><a href="">Untermenupunkt 1a</a></li>

</ul>
</li>
<li>
<a href="">Menupunkt 2</a>
</li>
<li>
<a href="">Menupunkt 3</a>
<ul>
<li><a href="">Kurz</a></li>
<li><a href="">Langer Menüpunkt</a></li>
</ul>
</li>
</ul>
</body>
</html>

CSS:

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

/* Erscheinungsbild der Menüpunkte */
ul#dm a {
text-decoration: none;
background: #FFF;
border-top: 1px solid #000;
border-left: 1px solid #000;
border-right: 1px solid #000;
border-bottom: 1px solid #000;
padding: 3px 5px;
color: #666;
font: bold 11px Verdana,sans-serif;
}

/* Erscheinungsbild eines Menüpunkts bei Mouseover */
ul#dm a:hover {
border-top: 1px solid #000;
border-left: 1px solid #000;
border-right: 1px solid #000;
border-bottom: 1px solid #000;
color: #666;
}

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

ul#dm {
margin: 0;
padding: 0;
list-style: circle;
}
ul#dm li {
padding: 0;
margin: 0;
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;
z-index:1;
}

ul#dm li>li {
float: none;
}

Ich brauche dringend hilfe!!!!:(:(

Danke :)

djheke · 23 September 2013

Code:

<!DOCTYPE HTML>
<html lang="de">
  <head>
  <title>before</title>
  <meta charset="utf-8"/>
   


<style type="text/css">
* {
 margin : 0;
 padding : 0;
}

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

/* Erscheinungsbild der Menüpunkte */
ul#dm a {
text-decoration: none;
background: #FFF;
border-top: 1px solid #000;
border-left: 1px solid #000;
border-right: 1px solid #000;
border-bottom: 1px solid #000;
padding: 3px 5px;
color: #666;
font: bold 11px Verdana,sans-serif;
}

/* Erscheinungsbild eines Menüpunkts bei Mouseover */
ul#dm a:hover {
border-top: 1px solid #000;
border-left: 1px solid #000;
border-right: 1px solid #000;
border-bottom: 1px solid #000;
color: #666;
}

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

ul#dm {
margin: 0;
padding: 0;
list-style: circle;
}
ul#dm li {
padding: 0;
margin: 0;
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;
position: absolute;
right:-9999em;
}

#dm li:hover ul {
 position:relative;
 right:0;
}


</style>

</head>


<body>
<ul id="dm">
<li>
<a href="">Menupunkt 1</a>
<ul>
<li><a href="">Untermenupunkt 1a</a></li>

</ul>
</li>
<li>
<a href="">Menupunkt 2</a>
</li>
<li>
<a href="">Menupunkt 3</a>
<ul>
<li><a href="">Kurz</a></li>
<li><a href="">Langer Menüpunkt</a></li>
</ul>
</li>
</ul>
</body>
</html>

So gehts.

Dropdown-menüpunkte überlappen

anjaaa

Neues Mitglied

djheke

Aktives Mitglied

Neueste Beiträge