master111 |
02.03.2010 17:11 |
Problem mit Klappmenü
Hallo,
ich verzweifele bei der Erstellung eines Klappmenüs. So soll es mal aussehen:
http://img214.imageshack.us/img214/1283/menuez.png
HTML-Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Test</title>
<STYLE TYPE="text/css" LANG="css">
<!--
#men {
margin: 130px 0 0 0;
}
#men ul {
list-style-type: none;
margin:0;
padding:0;
}
#men li {
position: relative;
margin:0;
padding:0;
display: inline;
float:left;
height:23px;
padding: 5px 3px 3px 3px;
margin: 0 10px 0 0;
}
#men li a {
text-decoration: none;
font-family: Arial, Helvetica, Sans-Serif;
color: #000;
padding: 5px 3px 3px 3px;
margin: 0 10px 0 0;
}
#men ul ul, #men ul li:hover ul ul {display: none;}
#men ul ul, #men ul li:hover ul ul {display: inline;}
#men ul ul { border: 1px solid red; }
#men ul ul li {width:400px; }
#men ul ul ul li {width:200px; }
#men ul ul {position: absolute; top: 30px; left: 0; background-color: grey; }
-->
</STYLE>
</head>
<body>
<div id="men">
<ul>
<li><a href="#">Menü 1</a></li>
<li><a href="#">Menü 2</a>
<ul>
<li><a href="#">Unterpunkt 1</a>
<ul>
<li><a href="#">Option 1</a></li>
<li><a href="#">Option 2</a></li>
<li><a href="#">Option 3</a></li>
<li><a href="#">Option 4</a></li>
</ul>
</li>
<li><a href="#">Unterpunkt 2</a>
<ul>
<li><a href="#">Option 1</a></li>
<li><a href="#">Option 2</a></li>
<li><a href="#">Option 3</a></li>
<li><a href="#">Option 4</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</body>
</html>
Frage:
1) Wie kann ich die Optionen rechts vom Unterpunkt umfließen lassen?
2) Wieso passt sich die Höhe der Unterpunkte nicht an die Optionen an?
Vielen Dank für Eure Tipps!
NIK
|