Sub-Sub-Menu - Wie bekomme ich dies Dreieck weg?

Quests Sohn

Quests Sohn

Mitglied
Hallo,

ich habe eine Navigation entwickeln lassen, die eine Sub-Menu hat.
Jetzt hat sich aber ergeben, dass weitere Unterseiten nötig werden.
Diese brauchen ein Sub-Sub-Menu.
Das ursprüngliche Sub-Menu hat oben ein kleines weißes Dreieck, wie eine Sprechblase.
Das Sub-Sub-Menu soll diese Ecke nicht haben.

Screen.png

Aber wie kann ich die dort entfernen?

Aktuell sieht der CSS des Sub-Menu so aus:
CSS: 
html body header.site-header .inside-header #sticky-navigation .inside-navigation #primary-menu ul#menu-main-menu > li ul.sub-menu:before {
    content: "";
    position: absolute;
    margin-left: 20px;
    top: -3px;
    background: white;
    border-radius: 2px;
    display: block;
    width: 15px;
    height: 15px;
    box-shadow: 0px 1px 8px 0px rgba(0, 0, 0, 0.3);
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
  }

Und so sieht der Sourcecode der Seite aus:

Source.png


Ich hatte erwartet, das Problem mit diesem CSS-Code zu beheben:
CSS: 
html body header.site-header .inside-header #sticky-navigation .inside-navigation #primary-menu ul#menu-main-menu > li ul.sub-menu > li ul.sub-menu:before {
        content: "";
        position: absolute;
        margin-left: 20px;
        top: -3px;
        background: none !important;
        border-radius: 2px;
        display: none;
        width: 1px;
        height: 1px;
        box-shadow: none;
        -webkit-transform: rotate(45deg);
        transform: rotate(45deg);
    }


Aber das hat leider nicht funktioniert.
Hat jemand einen Tipp, was ich falsch mache?
 
Zuletzt bearbeitet von einem Moderator:
Wenn man ohne Bilder oder einen Blick in die Entwicklertools
das Problem nicht aufdecken kann, dann habe ich wohl ein Problem.

Ich dachte, dass ich vielleicht einfach nur einen simplen
Zuweisungsfehler mache, also das "before"-Element durch meine
CSS-Beschreibung nicht korrekt angesprochen wird ...

Der Aufbau ist ja wie folgt:
<html><body><header><div><nav><div><div><ul><li><ul><li><ul> :: before :: <li>

Und ich hoffte, das "before"-Element so zu erwischen:

html body header.site-header .inside-header #sticky-navigation .inside-navigation #primary-menu ul#menu-main-menu > li ul.sub-menu > li ul.sub-menu:before {}
 
Du kannst mal screenshots machen, wie die Styleänderungen, die du im Code vorgenommen hast, sich auswirken.

Die Styles, des :before Pseudoelements, die du zeigst, sehen aus, als ob sie für das "Dreieck" zuständig sind.
Was passiert denn wenn du die Style-Regel komplett löschst?
 
Ich habe das Ganze mal auf den Kern der Sache reduziert:
Code: 
<!DOCTYPE html>
<html lang="de">

<head>
    <meta charset="utf-8" />
    <title>Remove CSS Arrow</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1" />
    <style>
        ul.sub-menu {
            position: relative;
        }

        ul.sub-menu li {
            background-color: white;
            position: relative;
            z-index: 999;
        }

        ul.sub-menu:before {
            content: "";
            position: absolute;
            margin-left: 20px;
            top: -3px;
            background: white;
            border-radius: 2px;
            display: block;
            width: 15px;
            height: 15px;
            box-shadow: 0px 1px 8px 0px rgba(0, 0, 0, 0.3);
            -webkit-transform: rotate(45deg);
            transform: rotate(45deg);
        }
    </style>
</head>
<body>
    <ul class="sub-menu">
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
    </ul>
</body>
</html>
und mich erinnert, dass die Pseudoelemente before und after einen content brauchen um sichtbar zu werden. Mache ich davon Gebrauch und setze content: unset; für das betr. Pseudoelement, so verschwindet es.
Versuche es mal auf diese Weise.

Übrigens: Deine Selektoren sind unnötig kompliziert. Eine ID muss immer dokumentweit eindeutig sein, daher kann alles, was links davon steht, entfallen. Dann wird das CSS gleich viel übersichtlicher.
 
PS: Du könntest das Pferd natürlich auch anders herum aufzäumen und die Selektoren des ::before so ändern, dass sie nur auf die ul-Elemente wirken, bei denen Du das haben willst. Voraus gesetzt, Du hast Zugriff auf dieses CSS.
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück