Zeige Grenzdreieck in Navbar mit CSS

Question

Ich versuche, eine Navigationsleiste mit einem Pfeil unter dem Element, auf dem schwebte. Hier ist, was ich versuche zu machen:

Für den Pfeil I die Pseudo-Elemente verwendet haben before und after. Hier ist ein Teil des Codes:

body { 
 
    background: #FFFFFF; 
 
    color: #FFFFFF; 
 
    margin: 0px; 
 
    padding: 0px; 
 
    height: 100%; 
 
} 
 
.clear { 
 
    clear: both; 
 
} 
 
.page-wrap { 
 
    width: 980px; 
 
    margin: 0px auto; 
 
    height: 100%; 
 
} 
 
#main-menu { 
 
    background: white; 
 
    height: 55px; 
 
    width: 100%; 
 
    padding: 0px; 
 
    margin: 0px; 
 
    border-bottom: 1px solid black; 
 
} 
 
ul { 
 
    font-family: Arial, Verdana; 
 
    font-size: 18px; 
 
    margin: 0; 
 
    padding: 0; 
 
    list-style: none; 
 
} 
 
ul li { 
 
    display: block; 
 
    position: relative; 
 
    float: left; 
 
} 
 
li ul { 
 
    display: none; 
 
} 
 
ul li a { 
 
    display: block; 
 
    text-decoration: none; 
 
    color: black; 
 
    padding: 0 9px 0 9px; 
 
    background: white; 
 
    margin-left: 1px; 
 
    white-space: nowrap; 
 
    line-height: 55px; 
 
    font: 18px; 
 
    font-family: Arial, Helvetica, sans-serif; 
 
    outline: none; 
 
} 
 
ul li a:hover { 
 
    color: black; 
 
} 
 
#menu a:hover:after { 
 
    content: ""; 
 
    position: absolute; 
 
    top: 40px; 
 
    left: 50%; 
 
    margin-left: -15px; 
 
    width: 0px; 
 
    height 0px; 
 
    xxmargin: 0px auto; 
 
    border-left: 15px solid transparent; 
 
    border-right: 15px solid transparent; 
 
    border-bottom: 15px solid black; 
 
}

<header id="main-menu"> 
 
    <div class="page-wrap"> 
 
    <ul id="menu"> 
 
     <li><a href="#">Recommended</a></li> 
 
     <li><a href="#">Recent</a></li> 
 
    </ul> 
 
    </div> 
 
</header>

Fiddle Link

Die Pfeile sind schwarz in der Farbe, weil die Rahmenfarbe. Wie zeigt man nur die Grenzen des Pfeils?

Answer 1

Fügen Sie einfach before Pseudo-Element wie das, was Sie :after

#menu a:hover:after { 
    content: ""; 
    position: absolute; 
    top: 41px; 
    left: 50%; 
    margin-left: -15px; 
    width: 0px; 
    height 0px; 
    margin: 0px auto; 
    border-left: 15px solid transparent; 
    border-right: 15px solid transparent; 
    border-bottom: 15px solid white; 
} 
#menu a:hover:before { 
    content: ""; 
    position: absolute; 
    top: 40px; 
    left: 50%; 
    margin-left: -15px; 
    width: 0px; 
    height 0px; 
    margin: 0px auto; 
    border-left: 15px solid transparent; 
    border-right: 15px solid transparent; 
    border-bottom: 15px solid black; 
} 

hinzufügen, und ich habe Sie Stift aktualisiert bitte

http://codepen.io/anon/pen/vOxmGZ

Answer 2

Sie können ein gedrehtes Pseudoelement mit Grenzen verwenden überprüfen:

body { 
 
    background: #FFFFFF; 
 
    color: #FFFFFF; 
 
    margin: 0px; 
 
    padding: 0px; 
 
    height: 100%; 
 
} 
 
.page-wrap { 
 
    width: 980px; 
 
    margin: 0px auto; 
 
    height: 100%; 
 
} 
 
#main-menu { 
 
    background: white; 
 
    height: 55px; 
 
    width: 100%; 
 
    padding: 0px; 
 
    margin: 0px; 
 
    border-bottom: 1px solid black; 
 
} 
 
ul { 
 
    font-family: Arial, Verdana; 
 
    font-size: 18px; 
 
    margin: 0; 
 
    padding: 0; 
 
    list-style: none; 
 
} 
 
ul li { 
 
    display: block; 
 
    position: relative; 
 
    float: left; 
 
} 
 
li ul { 
 
    display: none; 
 
} 
 
ul li a { 
 
    display: block; 
 
    text-decoration: none; 
 
    color: black; 
 
    padding: 0 9px 0 9px; 
 
    background: white; 
 
    margin-left: 1px; 
 
    white-space: nowrap; 
 
    line-height: 55px; 
 
    font: 18px; 
 
    font-family: Arial, Helvetica, sans-serif; 
 
    outline: none; 
 
} 
 
ul li a:hover { 
 
    color: black; 
 
} 
 
#menu a:hover:after { 
 
    content: ""; 
 
    position: absolute; 
 
    bottom:-10px; 
 
    left: 50%; 
 
    margin-left:-10px; 
 
    width: 20px; 
 
    height: 20px; 
 
    background:#fff; 
 
    -webkit-transform:rotate(45deg); 
 
    -ms-transform:rotate(45deg); 
 
    transform:rotate(45deg); 
 
    border-left:1px solid #000; 
 
    border-top:1px solid #000; 
 
    box-sizing:border-box; 
 
}

<header id="main-menu"> 
 
    <div class="page-wrap"> 
 
    <ul id="menu"> 
 
     <li><a href="#">Recommended</a> 
 
     </li> 
 

 
     <li><a href="#">Recent</a> 
 
     </li> 
 
    </ul> 
 
    </div> 
 
</header>

Answer 3

Es kann leicht mit der Vorher-Nachher-Klasse durchgeführt werden. Ändern Sie Ihr Pseudo-Element in vor und verwenden Sie ein After-Pseudo-Element, um ein weißes Dreieck innerhalb des schwarzen Trainagle zu zeichnen. Für Ihren Code kann das CSS so etwas wie diese

#menu a:hover:before { 
    content: ""; 
    position: absolute; 
    top: 40px; 
    left: 50%; 
    margin-left: -15px; 
    width: 0px; 
    height 0px; 
    xxmargin: 0px auto; 
    border-left: 15px solid transparent; 
    border-right: 15px solid transparent; 
    border-bottom: 15px solid black; 

    } 
#menu a:hover:after { 
    content: ""; 
    position: absolute; 
    top: 40px; 
    left: 50%; 
    margin-left: -15px; 
    width: 0px; 
    height 0px; 
    xxmargin: 0px auto; 
    border-left: 12px solid transparent; 
    border-right: 12px solid transparent; 
    border-bottom: 12px solid white; 

}