Drop-Down-Menü

[momo95]

Hallo,
ich habe ein schönes Menu erstellt.
Wie der Titel schon verät hat es hovereffekte, die eine verschachtelte Liste anzeigen.

Hier die Codes:

Css:
[HTML]#menu {
position: absolute;
top: 50px;
left: 100px;
width: 100%;
background: #ffffff;
float: left;
}

#menu ul {
list-style: none;
border:1px solid #000000;
margin: 0;
padding: 0;
float: left;
}

#menu a, #menu h2 {
font: bold 11px/16px arial, helvetica, sans-serif;
display: block;
border-width: 1px;
border-color: #000000;
boder-style: solid;
margin: 0;
padding: 2px 3px;
}

#menu h2 {
color: #ffffff;
background-image: url(images/bg-ul.png);
}

#menu h2:hover {
color: #000000;
background: #ffffff;
}

#menu a {
color: #000000;
background: #ffffff;
text-decoration: none;
}

.right {
color: #000000;
background: #ffffff;
text-decoration: none;
text-align: right;
padding: 0px 0px 0px 0px;
margin: 0px 0px 0px 0px;
}

.right:hover {
color: #ffffff;
background: #000000;
text-decoration: none;
text-align: right;
padding: 0px 0px 0px 0px;
margin: 0px 0px 0px 0px;
}

#menu a:hover {
color: #ffffff;
background-image: url(images/bg-ul.png); /Hintergrund Hover/
}

#menu li {
position: relative;
}

#menu ul ul {
position: absolute;
z-index: 500;
left: -1px;
}

#menu ul ul ul {
position: absolute;
top: 0;
left: 100%;
}

div#menu ul ul,
div#menu ul li:hover ul ul,
div#menu ul ul li:hover ul ul
{display: none; width: auto;}

div#menu ul li:hover ul,
div#menu ul ul li:hover ul,
div#menu ul ul ul li:hover ul
{display: block; width: auto;}[/HTML]Und HTML:
[HTML]

• Links 1-4

  • Link 1
    • Link 2
    • Link 3
    • Link 4

• Links 5-12

  • Link 5
  • Link 6
    • Link 7
      • Link 8
      • Link 9
      • Link 10
      • Link 11
      • Link 12

• Links 13-19

  • Link 1
  • Link 1
    • Link 1
      • Link 14
      • Link 15
      • Link 16
      • Link 17
      • Link 18
      • Link 19

[/HTML]Jetzt zu meinem Problem: Ich will die Liste in der Breite dem Inhalt anpassen. In den ersten 2 Ebenen ist es ok. Aber in den beiden unteren gibt es immer einen Zeilenumbruch.

Habt ihr eine Idee oder einen Fehler?

Vielen Dank!

[Cheffchen]

Hallo,

hast schon mit white-space:nowrap; probiert.

habe mal deins damit erweitert.
[HTML]#menu {
position: absolute;
top: 50px;
left: 100px;
width: 100%;
background: #ffffff;
float: left;
}
#menu ul {
list-style: none;
border:1px solid #000000;
margin: 0;
padding: 0;
float: left;
}
#menu a, #menu h2 {
font: bold 11px/16px arial, helvetica, sans-serif;
display: block;
border-width: 1px;
border-color: #000000;
boder-style: solid;
margin: 0;
padding: 2px 3px;
}
#menu h2 {
color: #ffffff;
background-image: url(images/bg-ul.png);
}
#menu h2:hover {
color: #000000;
background: #ffffff;
}
#menu a {
color: #000000;
background: #ffffff;
text-decoration: none;
}
.right {
color: #000000;
background: #ffffff;
text-decoration: none;
text-align: right;
padding: 0px 0px 0px 0px;
margin: 0px 0px 0px 0px;
}
.right:hover {
color: #ffffff;
background: #000000;
text-decoration: none;
text-align: right;
padding: 0px 0px 0px 0px;
margin: 0px 0px 0px 0px;
}
#menu a:hover {
color: #ffffff;
background-image: url(images/bg-ul.png); /Hintergrund Hover/
}
#menu li {
position: relative;
width: auto;
white-space:nowrap;
}
#menu ul ul {
position: absolute;
z-index: 500;
left: -1px;
}
#menu ul ul ul {
position: absolute;
top: 0;
left: 100%;
}
div#menu ul ul,
div#menu ul li:hover ul ul,
div#menu ul ul li:hover ul ul
{
display: none;
width: auto;
white-space:nowrap;
}
div#menu ul li:hover ul,
div#menu ul ul li:hover ul,
div#menu ul ul ul li:hover ul
{
display: block;
width: auto;
white-space:nowrap;
};[/HTML]

Cheffchen

[momo95]

Super, Danke.

hat geklappt.
den wert kannte ich garnicht.