EDIT: Siehe auch meine eigene Antwort unten (2016)
Zum Beispiel:
%Vor%Dann gestylt:
%Vor%ok. Also, ich habe das Hauptmenü, das horizontal angezeigt wird. Ich möchte auch, dass das Untermenü horizontal anzeigt. Aber aus irgendeinem Grund ändert sich die Größe der ul-Box nicht, um die gesamte li-Tags-Breite zu erreichen, so dass sie vertikal bleibt. Die Eltern-ul leiden nicht an diesem Problem. Ich könnte es schaffen, indem ich einfach eine richtige Breite zu der Kind-ul hinzufüge, aber das ist nicht die Art, die ich verwenden möchte.
Irgendeine Idee?
Es gibt eine Dummheit: In den Untermenüs können Sie den sumbenus auf die innere Elementbreite zwingen, indem Sie einfach whitespace: no-wrap auf die inneren Elemente zwingen. Es funktioniert trotz jeder Technik oder Layout, das Sie verwenden - Haupt-LI-Elemente mit Display: Inline-Block oder moderne Flex-Layouts // und für die Subs, normale Anzeige keine / Block oder moderne CSS3 FX-Lösungen - Es ist egal. Ein rohe Beispiel kann genau das sein, in diesem Fall mit flexbox und fade / out fx für Subs (aber könnte etwas einfacher No-Flexbox oder älter sein, es ist wirklich egal):
%Vor% Es ist wichtig, das :hover zweimal zu haben, wenn Sie absolute Position verwenden; 1. auf der li , die die display: block auslöst, dann auf der ul , die beim Trigger angezeigt wird.
Und dann die Positionierung und das Styling getrennt halten: Ich habe die a und nicht die li
Siehe hier: Ссылка
%Vor% Sollte auch mit float:left funktionieren
Ссылка
Elemente mit position: absolute nehmen die Größe ihrer untergeordneten Elemente an.
Sie können entweder width: 100%; auf der ul setzen oder left: 0; right: 0; setzen, wodurch auch die richtige Größe erreicht wird.
Vielleicht möchten Sie auch list-style:none; auf den verschachtelten ULs sowie auf der obersten Ebene setzen.
Für die Person, die vorgeschlagen hat, dass Sie IDs und Klassen verwenden, ist es nicht notwendig, bis auf vielleicht die erste UL, die als "Menü" bezeichnet wird. Ich sage das, weil das, wonach Sie suchen, sehr starr und strukturiert ist.
Dies ist, was ich verstehe, was Sie erreichen möchten: Holen Sie sich ein horizontales Hauptmenü, das ein anderes horizontales Untermenü darunter zeigt, wenn Sie über das Hauptmenü "Links"
gehenWie hier gezeigt:
%Vor%Ich kann Ihnen jetzt nicht sagen, wie Sie Ihre Menüs gestalten sollen. Aber wie du jetzt sehen kannst, bin ich mir nicht sicher, wie es funktionieren soll. Sollte das zweite Menü links neben dem Hauptpunkt des Hauptmenüs stehen, über dem es schwebte? Oder Soll das zweite Menü linksbündig auf das gesamte Menü ausgerichtet sein?
Wenn es der erste ist, wird der letzte Menüpunkt zu klein sein, um Links unter (ein oder zwei Max) zu haben, und wenn es die zweite Version ist, werden Leute frustriert sein, dass sie das Untermenü "verlieren" wenn Sie versuchen, die Links ganz nach links zu bewegen, wenn Sie über den letzten Menüpunkt fahren (in unserem Beispiel: Menüpunkt 3). Vertrauen Sie mir, die meisten Benutzer sind nicht so geschickt mit der Maus und vertrauen mir, die erste Version würde einfach schlecht aussehen.
So verwenden Leute vertikale Untermenüs, wenn das Hauptmenü horizontal ist, aber ich werde nicht wieder Ihre Motive in Frage stellen. Ich werde versuchen, deine Frage so gut wie möglich zu beantworten, was letztendlich der zweite Weg sein wird, der so eingerichtet wird:
%Vor%Erstens ist Ihr Code nicht einmal so eingerichtet, dass er so funktioniert. Die Art und Weise, wie Ihr Code gerade geschrieben wird, endet wie das erste Beispiel, das ich Ihnen gezeigt habe (was, wie ich erklärt habe, sehr wenig horizontalen Platz für den letzten Menüpunkt haben wird, wenn Ihr Menü die Breite Ihrer Seite einnimmt natürlich)
Um dieses Ziel zu erreichen, müssen Sie die relative Positionierung Ihres li loswerden. Eine andere Idee, wenn Sie es aus irgendeinem Grund relativ haben müssen, ist, dass jeder Li Ihres Hauptmenüs auf einen anderen Z-Index gesetzt wird und sie linken Rand / Padding sowie rechten Rand / Padding als "passen" Sie Ihren gesamten Speisekarte. Ich finde das ein "Hack" und würde eher die relative Positionierung Ihres Li auslassen.
Die absolute Ebene ist unter Ihrem relativen Objekt verschachtelt (was auch immer es ist, in diesem Fall ist es das Menü
)Wenn Sie das Hauptmenü relativ positionieren müssen, müssen Sie die linke Position jeder verschachtelten ul manuell individuell einstellen. Und für alle außer dem ersten wird dies eine negative Zahl sein und wird keine exakte Wissenschaft sein, da nicht alle Browser die gleiche Schriftart anzeigen (und somit geringfügige Änderungen in der Breite der Menüelemente verursachen werden, um dem entgegen zu wirken müssen Bilder für die perfekte Breite in allen Browsern aller Altersgruppen verwenden). Aber dies lenkt von der Schönheit von CSS ab, die wenige Zeilen verwendet, um mehrere Elemente zu entwerfen.
Es wäre viel einfacher, die "relative" Positionierung aus dem Hauptmenü li zu entfernen (# main-menu & gt; ul & gt; li) und etwas unteres Padding hinzuzufügen, sonst wirst du niemals in der Lage sein zu schweben Über das Untermenü wird es jedes Mal verschwinden. Wenn ich raten müsste, was du machst und ich das CSS / HTML programmiere, würde ich es so machen:
HTML:
%Vor%CSS:
%Vor%Ich habe das in meinem eigenen Browser getestet und es scheint so zu funktionieren, wie du es willst. Inzwischen sollten Sie zwei andere Möglichkeiten kennen, um dies zu erreichen, aber mit unterschiedlichen Ergebnissen und mehr Arbeit als diese Version.
Wenn Sie sicher sind, dass die Elemente immer in einer Zeile stehen, können Sie "position: relative" verschieben. an Eltern ul, und entfernen Sie "links: 0;" von der zweiten ul wird es tun, was Sie wollen, aber wenn es am Ende der Zeile zu viele Elemente geben wird, werden sie abgeschnitten.
Beispiel: Ссылка
Da Sie dies in Ihrem Code angegeben haben
%Code%
Es wäre am besten, wenn du #main-menu > ul > li:hover ul {
display:inline-block; } machst
so könnte es die volle Breite des li-Tags gehen
Dies sollte den Trick machen.
Tags und Links css html-lists