nicht angemeldet
Hallo Gemeinde,
sitze seit stunden an einem Problem. Habe mir ein eigenen Menu mit Submenüs gebastelt. Funktioniert soweit gut aber Punkt1 und Unter 1 bekomme ich nicht auf eine linie: Wo liegt das Problem? Was mache ich Falsch?
So sieht es aus:
|------------|
hover -> | Punkt 1 |
| Punkt 2 | | Unter 1 |
| Punkt 3 | | Unter 1 |
| Punkt 4 | | Unter 1 |
|------------| | Unter 1 |
| Unter 1 |
So soll es aussehen:
|------------|
hover -> | Punkt 1 | | Unter 1 |
| Punkt 2 | | Unter 1 |
| Punkt 3 | | Unter 1 |
| Punkt 4 | | Unter 1 |
|------------| | Unter 1 |
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<meta name="author" content="cbw-tn">
<meta name="editor" content="html-editor phase 5">
<style type="text/css">
* {
font-family:verdana;
margin: 0;
padding: 0;
}
#main {
text-align: center;
position: absolute;
top: 100px;
left: 25%;
}
#menu {
width: 120px;
height: 20px;
overflow: hidden;
border: 1px solid;
}
#menu:hover {
width: 120px;
height: auto;
border: 1px solid;
}
#menu:hover ul {
list-style-type: none;
}
#menu:hover ul li {
height: 20px;
overflow: hidden;
}
#menu:hover ul li:hover {
height: auto;
border: 1px solid;
}
#menu:hover ul li:hover ul {
position:absolute;
width: 120px;
margin-left: 119px;
border: 1px solid;
margin-bottom: 30; /*schiebt nichts hoch, wieso?*/
}
</style>
</head>
<body text="#000000" bgcolor="#FFFFFF" link="#FF0000" alink="#FF0000" vlink="#FF0000">
<div id="main">
<div id="menu">Menu
<ul>
<li>Punkt1
<ul>
<li>Unter 1</li>
<li>Unter 1</li>
<li>Unter 1</li>
<li>Unter 1</li>
<li>Unter 1</li>
<li>Unter 1</li>
</ul>
</li>
<li>Punkt 2
<ul>
<li>Unter 2</li>
<li>Unter 2</li>
<li>Unter 2</li>
</ul>
</li>
<li>Punkt 3
<ul>
<li>Unter 3</li>
<li>Unter 3</li>
<li>Unter 3</li>
</ul>
</li>
<li>Punkt 4
<ul>
<li>Unter 4</li>
<li>Unter 4</li>
<li>Unter 4</li>
</ul>
</li>
</ul>
</div>
</div>
</body>
</html>
Der Martin