Javascript 简单css下拉菜单中的紫色链接

我正在设计一个非常简单的CSS下拉菜单，我在网上找到的，问题是我不能使文本链接得到颜色，他们都只是紫色的文本。以下是CSS代码：

/* DROPDOWN MENU */
ul.menu {padding:0;margin:0;list-style-type:none;}
ul.menu >li{float:left;}
ul.menu >li>a{display:inline-block;padding:7px 7px 0px 7px;text-decoration:none;}
.last {border-right:solid 3px #282828;}
ul.menu >li>a:hover{color:#777;
}

ul.menu li ul{
    padding: 0;
    margin: 0;
    list-style-type: none;
    background: #fff;
    position: absolute;
    display: none;
}
ul.menu li:hover ul{
    display: block;
    color: #010101;
}

ul.menu li ul li a:link{
    padding: 15px 20px;
    display: block;
/*    height: 40px;*/
    line-height: 30px;
    text-decoration: none;
    color: #010101;
    -webkit-transition: all 0.4s;
    -moz-transition: all 0.4s;
    -ms-transition: all 0.4s;
    -o-transition: all 0.4s;
    transition: all 0.4s;
}
ul.menu li ul li a:hover{
    background: #555;
    color: #ffffff;
}

下面是HTML代码

<ul class="menu">


    <li>
        <a href="#"><div class="buttons">Stötar</div></a>
        <ul>
            <li><a href="#">försvar</a></li>
            <li><a href="#">Web Development</a></li>
            <li><a href="#">Illustrations</a></li>
        </ul>
    </li>
    <li><a href="#"><div class="buttons">Gäng</div></a></li>
    <li><a href="#"><div class="buttons">Staden</div></a></li>
    <li><a href="#"><div class="buttons">Fängelse</div></a></li>
    <li><a href="#"><div class="buttons">Shopping</div></a></li>

    <li><a href="#"><div class="active">Beskydd</div></a></li>
    <li class="last"><a href="#"><div class="buttons">Konto</div></a></li>
</ul>

如果我们把这段代码放在一个JSFIDLE中，它看起来还可以，而且似乎可以修复，但是当在Google Chrome中测试它时，链接只是紫色的

JSFIDLE

更新：

---

它只会在访问时发生，你知道如何修复吗？（我是CSS新手）

这可能是因为链接被访问了吗？您可能需要为a:active、a:visted等设置其他css类。

替换

ul.menu li ul li a:hover{
    background: #555;
    color: #ffffff;
}

与

---

为主链接添加颜色：

ul.menu >li>a

并为子菜单链接添加下一行

ul.menu >li>ul>li>a{color:red;}

/*下拉菜单*/
ul.menu{填充：0；边距：0；列表样式类型：无；}
ul.menu>li{float:left；}
ul.menu>li>a{显示：内联块；填充：7px 7px 0px 7px；文本装饰：无；颜色：红色；}
ul.menu>li>ul>li>a{color:red；}
.最后{右边框：实心3px#282828；}
ul.menu>li>a:hover{color:#777；
}
菜单{
填充：0；
保证金：0；
列表样式类型：无；
背景：#fff；
位置：绝对位置；
显示：无；
颜色：红色；
}
菜单li：悬停ul{
显示：块；
颜色：#010101；
}
菜单链接{
填充：15px 20px；
显示：块；
/*高度：40px*/
线高：30px；
文字装饰：无；
颜色：红色；
-webkit转换：所有0.4s；
-moz转换：全部为0.4s；
-ms转换：所有0.4s；
-o型过渡：均为0.4s；
过渡：全部为0.4s；
}
ul.菜单li ul li a:悬停{
背景:#555；
颜色：#ffffff；
}

是的，它正在访问中，如何解决此问题？你的意思是更改>ul.menu li ul li a:linkul.menu li ul li li li a<？唯一的问题是它将所有链接更改为同一颜色，我希望主链接使用一种颜色，子链接使用另一种颜色，但你的想法很好anyway@jagvillintesaga再读一遍我的答案。您有主链接和子菜单链接的代码，请编辑此颜色：适合您需要的红色。我清楚地表明了这两者之间的区别。

ul.menu >li>ul>li>a{color:red;}