✔ Horizontales Menü mit DropDown Untermenüs

  • Themenstarter Themenstarter BreezeKeeper
  • Beginndatum Beginndatum
B

BreezeKeeper

Hi,

ich bin schon Ewigkeiten durchs netz gezogen und aheb bisher noch keine ANtworta uf meine Frage erhalten, weshalb ich nun einfach mal euch fragen wollte:

Es geht um eine horizontale Navigation mit mehreren Ebenen. Aber zur Fragestellung reichen wohl zwei Ebenen ausö. Die zweite nämlich soll bei Mouseover als Dropdown Menü vertikal angezeigt werden.
z.B. so: http://de.selfhtml.org/css/layouts/anzeige/nav_modern.htm

Das Problem: ich möchte keine festgelegte Breite des Untermenüs. Dieses soll sich an der Länge der Einträge orientieren. Natürlich könnte man sowas simulieren, indem man dem Untermenu nen hintergund gibt und den einzelnen Einträgen keinen. Aber das ist in diesem Fal nicht möglich, da ich die Einträge in kompletter Breite benötige.

Nun ja .. wie ichs auch dreh und wende will der IE7 das nicht machen .. hat jemand nen rat ?

hier ein beispiel, dass das problem beschreibt:
http://kuerten2.nils-rueckmann.de/

danke schonmal im voraus
 
Falls du dich in dem Quellcode nicht zurechtfinden solltest, hier eine abgespeckte Version, die sich auf das Wesentliche beschränkt :)

HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
<meta name="author" content="Maik" />
<meta name="date" content="2010-05-19" />

<title>tutorials.de | Horizontales Menü mit DropDown Untermenüs</title>

<style type="text/css">
/* <![CDATA[ */
#menu {
list-style-type:none;
margin:0;
padding:0;
}
#menu li {
display:block;
float:left;
position:relative;
z-index:100;
margin-right:1px;
}
#menu li span {
display:block;
z-index:100;
background:#eee;
padding:5px 10px;
}
#menu li a, #menu li a:visited {
display:block;
padding:0;
}
#menu dl {
position:absolute;
top:0;
left:0;
margin:0;
padding:0;
}
#menu dt {
background:#eee;
margin:0;
float:left;
}
#menu dd {
display:none;
background:transparent;
border-bottom:1px solid #888;
clear:left;
margin:0;
padding:0;
color:#000;
}
#menu dt a, #menu dt a:visited {
display:block;
color:#000;
padding:5px 10px;
text-decoration:none;
}
#menu dd a, #menu dd a:visited {
background:#ddd;
color:#000;
text-decoration:none;
display:block;
padding:5px 10px;
}
#menu li:hover dd {
display:block;
}
/* ]]> */
</style>

</head>
<body>

<ul id="menu">
    <li><span>toplink&nbsp;1</span>
        <dl>
            <dt><a href="#">toplink&nbsp;1</a></dt>
            <dd><a href="#">subsublink&nbsp;1</a></dd>
        </dl>
    </li>
    <li><span>toplink&nbsp;2</span>
        <dl>
            <dt><a href="#">toplink&nbsp;2</a></dt>
            <dd><a href="#">subsubsublink&nbsp;2</a></dd>
        </dl>
    </li>
</ul>

</body>
</html>


Für ein Dropdownmenü mit weiteren Untermenüebenen empfehle ich dir diese Demos:


mfg Maik
 
HI, vielen dank schonmal für eure Antworten.

Bin jetzt einen Schritt weiter, aber bei den nächsten Ebenen tritt das Problem weder auf. Ich habe keine Ahnung wieso, da diese ja die selbe Formatierung hat ...

Jemand ne Idee ?

http://kuerten2.nils-rueckmann.de/
 
Hi Maik, danke für die schnelle antwort. Aber kann damit irgendwie nichts anfangen :)

ich mein . oveflow:hidden haben doch alle listen .. wieso funktioniert es dann ab der 3ten ebene nicht mehr ?

Nachtrag: overflow wird nur im FF gesetzt nicht im IE .. aber selbst wenn ich overflow im IE setze passiert nichts
 
Hab ich auch gesehen .. aber ich sehe den Unterschied nicht .. das muss doch auch bei meinem menü funktionieren .. und nicht einfach für verschiedene ebenen anders ablaufen
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück