allo 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 :)
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 :)
