html - css 样式链接 - 被 href 弄乱了

Question

在帮助下，我已经按照我想要的方式对这个列表进行了布局和着色。

https://jsfiddle.net/2t3cqr5m/

但是我正在向列表中添加一个 HREF，现在列表值正在改变样式和颜色，从我的主 css 脚本中读取。

<li class='menu'><a href='#'><span class="icon-indent"></span> Learn HTML </a></li>
<li class='menu'><a href='#'><span class="icon-indent"></span> Create my own web site: 
  <ol>
    <li class='menu'><a href='#'><span class="icon-indent"></span> Development Articles </a></li>
    <li class='menu'><a href='#'><span class="icon-indent"></span> News and Stuff </a></li>
    <li class='menu'><a href='#'><span class="icon-indent"></span> Funny Cat Pictures </a></li>
  </ol>
</a></li>

我如何确保它们不会更改并使用示例中显示的样式？

谢谢

Answer 1

只需添加以下 CSS:-

.menu a:hover {
        cursor: pointer;
        -webkit-transition: all 0.2s ease-in-out;
            transition: all 0.2s ease-in-out;
         color: #000000;
}

.menu a:hover {
        color: #2693ff;
}

https://jsfiddle.net/mac3Lgv6/