Navigation link changing colors randomly

Question

I have built a navigation list for a client and they opted to use the [Oswald]() font-face.

Now when the user scrolls over the link a navigation arrow will pop up to the side indicating which link is currently click, it is NOT supposed to turn orange upon hovering. I have removed any javascript and the fontface entirely and still can not remove the problem.

Here is a screenshot of the issue http://cl.ly/043a0q0o0Q392q2m1k20

My CSS (SASS) is as follows:

    #leftnav {

        width: 205px;
        float: left;

        ul {

            li {
                border: 1px solid #fff;
                border-top: 0px;
                background: #cc5816;
                padding: 3px 10px;
                @include gradient($top_color: #d86c07, $bottom_color: #bb5e06);

                a {
                    position: relative;
                    font-family: $main_bold_font;
                    font-size: 16pt;
                    color: #fff;
                    text-decoration: none;
                    text-shadow: $text_shadow;
                }

                a:hover { @extend a; }

                a:visited { @extend a; }

            }

        }

    }

Any Ideas?

Answer 1

I dont know for sure if this solves the problem. But, as stated here, I would recommend to change the order of :hover and :visited to be :visited and :hover. Maybe it helps to analyse the compiled css.