Ich kann dem gesamten Dropdown-Menü keinen Umrandungsradius hinzufügen. Wenn ich den Umrandungsradius zu click-nav ul li hinzufüge, wird der Radius für Listenelemente angewendet. Ich habe den Rand-Radius zu .click-nav ul hinzugefügt, aber den Radius nicht auf das gesamte Dropdown-Menü angewendet.
Ihr border-radius wird gerade eingestellt und wird jetzt korrekt angezeigt. Wenn Sie sich diesen Code ansehen, habe ich den Radius hinzugefügt und background-color: red; festgelegt. Hier sehen Sie die Positionierung des zweiten ul und wie der Radius angezeigt wird.
Um das Problem zu umgehen, könnten Sie Klassen oder Pseudo-Klassen für die ersten (gut, zweiten technisch) und letzten Elemente der Liste hinzufügen.
%Vor% Hier ist ein Link zur Arbeitsversion . Wenn Sie die Pseudo-Klassen lieber nicht verwenden möchten, ersetzen Sie das Dropdown-Menü so, dass der obere Pfeil-Teil des inneren ul und der margin nicht so weit verschoben werden.
Wenn Sie der Liste (ul) eine Eigenschaft border-radius hinzufügen, können Sie nichts sehen.
Sie müssen auch overflow: hidden hinzufügen. Auch der Standardwert für den linken Padding von ul verursacht ein Problem für Sie. Du musst es reparieren, füge auch padding-left: 0 hinzu. Und schließlich verursacht Ihr Pfeil ein Rand-Radius-Top-Problem. Sie müssen der zweiten li einer Liste einen border-radius hinzufügen.
Sie können meine Geige sehen, ich habe es getan.
Ihr Menü besteht aus & lt; li & gt; -Elementen, so dass Sie dem ersten und letzten & lt; li & gt; -Element keinen Umrandungsradius hinzufügen müssen.
Aber Sie fügen dem li-Element keinen Hintergrund hinzu (wahrscheinlich einfacher?) Also müssen Sie das Menü auswählen: CSS-Selektor für das Element li:
%Vor%Was Sie tun, ist, den Hintergrund zu den li-Elementen child so hinzuzufügen:
%Vor%Und wir brauchen das Ende, also wir das letzte Element, aber sein Kind:
%Vor%
Verwenden Sie selector .click-nav ul .clicker + ul li:nth-of-type(2) a , um zuerst li a element nach .click-nav ul .clicker element auszuwählen, set border-top-left-radius , border-top-right-radius auf 6px ; .click-nav ul .clicker + ul li:nth-last-of-type(1) a zur Auswahl der letzten li a folgende .click-nav ul .clicker , border-bottom-left-radius , border-bottom-right-radius bis 6px
Tags und Links javascript html jquery css css3