Klappmenü
nik
- css
0 ChrisB
Hallo,
ich verzweifele bei der Erstellung eines Klappmenüs. So soll es mal aussehen:
<!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:
Vielen Dank für Eure Tipps!
NIK
Hi,
- Wie kann ich die Optionen rechts vom Unterpunkt umfließen lassen?
Hä, wer soll wo fliessen?
Umfluss geht allgemein über float. Ob das hier angebracht ist, oder eher nicht, kommt darauf an, was genau du willst.
- Wieso passt sich die Höhe der Unterpunkte nicht an die Optionen an?
Weil du die Unterpunkte aus dem Fluss genommen hast, in dem du ihr UL absolut positioniert hast.
MfG ChrisB