mouse hover text color does not change

Question

I know an easy question, but the text color did not change when hovering over the menu with the mouse. I know I have missed a place. But I want to help you. This is demo page link: CodePenio

Menu, point to changing the background color, but the text color does not change. When the mouse on the menu point text color with the background color should be changed.

HTML:

<div tabindex="0" class="sd">
    <ul class="eddel">
        <li><a class="stdelete" href="#" id="<?php echo $msg_id;?>" title='Delete update'>Sil</a></li>
        <li><a href="#">Düzenle</a></li>
    </ul>
</div>

CSS:

.eddel {
    border:1px solid #d8dbdf;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    background-image: rgba(235,235,235,1);
    background-image: -webkit-linear-gradient(top, #2cbdf2 0%,#fafafa 0%,#f5f5f5 100%);
    background-image: -moz-linear-gradient(top, #2cbdf2 0%,#fafafa 0%,#f5f5f5 100%);
    background-image: -o-linear-gradient(top, #2cbdf2 0%,#fafafa 0%,#f5f5f5 100%);
    background-image: -ms-linear-gradient(top, #2cbdf2 0%,#fafafa 0%,#f5f5f5 100%);
    background-image: linear-gradient(top, #2cbdf2 0%,#fafafa 0%,#f5f5f5 100%);
    -webkit-box-shadow: rgba(128,128,128,1) 0px 0px 0px 0px, inset rgba(255,255,255,1) 0px 0px 0px 0px;
    -moz-box-shadow: rgba(128,128,128,1) 0px 0px 0px 0px, inset rgba(255,255,255,1) 0px 0px 0px 0px;
    box-shadow: rgba(128,128,128,1) 0px 0px 0px 0px, inset rgba(255,255,255,1) 0px 0px 0px 0px;
    padding:0;
    width:80px;
    margin-top: 15px;
    margin-left: -50px;
    padding-top: 4px;
    padding-bottom:4px;
}
.eddel a {
    width:80px;
    height:25px;
    text-decoration:none;
    font-family:'lucida grande',tahoma,verdana,arial,sans-serif;
    font-size:13px;
    color:#000;
}

/* arrow for the expanding part */
.eddel:after {
    content: "";
    position: absolute;
    top: -9px;
    left: 47px;
    border-style: solid;
    border-width: 0 7px 8px;
    border-color: #d8dbdf transparent;
    display: block;
    width: 0;
    z-index: 0;
} 
.eddel:before {
    content: "";
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 7px 8px;
    border-color: #fafafa transparent;
    display: block;
    position: absolute;
    top: -8px;
    left:47px;
    z-index:1;
}
.eddel li {
    cursor:pointer;
    list-style-type: none;
    white-space: nowrap;
    width:80px;
    height:25px;
    text-align:left;
    line-height:25px;
    text-indent:5px;
    padding:0;
}
.eddel li:hover {
    background:#3b5998;
    width:80px;
    height:25px;
    padding:0px;
    margin:0px;
    cursor:pointer;
    color:#FFF;
}

.sd {
    text-align: left;
}

Answer 1

Just add:

.eddel li:hover a {
    color: #FFF;
}

to your CSS