CSS - Hover and change triangle color

Question

I have a dropdown list menu with small triangle pointer, when I hover the first item I want the small triangle also change to black color.

This is my JS Fiddle, Thanks.

CSS

.username .messages {
    position:absolute;
    margin:22px 0px 0px -70px;
    width:200px;
    max-height:auto;
    color:black;
    -webkit-box-shadow: 0 8px 6px -6px black;
    -moz-box-shadow: 0 8px 6px -6px black;
    box-shadow: 0 8px 6px -6px black;
}
.username .messages:before {
    content:'.';
    display:block;
    position:absolute;
    margin-left:-10px;
    left:50%;
    top:-18px;
    width:0;
    height:0;
    border:10px solid black;
    color:black;
    border-color:transparent transparent #fff;
}

Answer 1

Place the arrow as the before pseudoelement of the first link

Example fiddle: http://jsfiddle.net/ebcho06a/5/

.messages a:first-child:before {
    content:'';
    display:block;
    position:absolute;
    margin-left:-10px;
    left:50%;
    top:-20px;
    width:0;
    height:0;
    border:10px solid black;
    color:black;
    border-color:transparent transparent #fff;
}

.messages a:first-child:hover:before {
    border-color:transparent transparent #000;
}

---

Effect on mouseover