0
Ich habe ein mehrstufiges Menü: Menüzeile + einige Elemente können eine Dropdown-Liste haben. Die Einträge in der Menüzeile sind durch '|' und offensichtlich der letzte Artikel sollte es nicht Grenze habenCSS: Wählen Sie das letzte Element in der angegebenen Tiefe (zwei Ebenen Menüleiste)
Das Problem ist, dass last-child hier erfasst das allerletzte Element in der letzten Dropdown-Liste und ich muss Menüzeile (item3) erfassen.
/* MENU */
div.menu {
display: inline;
}
div.menu a {
padding-left: 0.5em;
padding-right: 0.5em;
border-right: 1px solid lightgrey;
font-size: 12pt;
}
div.menu a:last-child {
border-right: 0px;
}
/*DROP DOWN*/
.dropdown {
position: relative;
display: inline;
}
.dropdown_content {
display: none;
z-index: 1;
position: absolute;
top: 1em;
right: 0;
background-color: #f9f9f9;
white-space: nowrap;
border-bottom: 1px solid lightgrey;
}
.dropdown_content a {
padding: 0.2em;
text-decoration: none;
display: block;
}
.dropdown:hover .dropdown_content {
display: block;
}<div class="menu">
<a href="">Item1</a>
<a href="">Item2</a>
<div class="dropdown">
<a class="dropbtn">Item3</a>
<div class="dropdown_content">
<a href="">Subitem1</a>
<a href="">Subitem2</a>
</div>
</div>
</div>ich reine CSS-Lösung benötigen, bitte keine JS
Es sollte
auf IE11 arbeite ich vermute, dass vielleicht das Menü HTML-Struktur zu nicht ideal ist .. Also könnte eine andere Struktur das Problem automatisch lösen.
Vielen Dank im Voraus! :)
Scheint, als ob beide Regeln da sein sollte: für 'a: Last-child' und' div: last-child> a'. Weil der letzte Gegenstand eine Drop-Liste oder nur ein normaler Gegenstand sein kann. Aber dann funktioniert es. Danke für den Hinweis ! :) –