Css悬停仅适用于Safari中的链接3

Question

我有3个链接到其他页面，但只有no3显示在Safari中悬停时的颜色变化。 它适用于Firefox和其他人，但不适用于Safari。

 ul .root-menu li:hover > a {
		    color:#FFF;
         }

        <div id="menu">
		    <ul id="root-menu">
			    <li><a href="index.php">HOME</a></li>
                <li><a href="area_covered.php">AREA COVERED</a></li> 
			    <li><a href="contact.php">CONTACT</a></li>    
		    </ul>
	    </div>

Answer 1

当看到你的案例的真实例子时，它有点复杂，但也许尝试设置display：inline-block或block for links

ul#root-menu li > a {
    display: block; // or inline-block
}

还尝试直接为 a 添加：悬停状态样式，但不添加 li ：

ul#root-menu li > a:hover {
    color:#FFF;
}

但是，如果你要展示真实的考试，答案会更准确