ripro子主题美化包，可以说在UI这方面做的非常不错，甚至可以细化到二级菜单文字前面的带颜色的小圆圈样式，加上和不加的效果还是有很大区别的，小编带大家看下加上之后的效果：
Java潘老师现在教大家该如何实现这样的效果，步骤如下：
1）第一步：打开你的ripro子主题里的文件，找到diy.css自定义样式文件，然后搜索下是否已经存在了类似如下的样式代码，如果没有，直接复制粘贴进去：
.lanse {
box-sizing: border-box;
content: ”;
width: 12px;
height: 12px;
border-radius: 50%;
position: absolute;
top: 50%;
margin-left: 10px;
margin-top: -6px;
left: 0;
border-color: #61e1b9;
border: 3px solid #7a99f2;
}
.lvse {
box-sizing: border-box;
content: ”;
width: 12px;
height: 12px;
border-radius: 50%;
position: absolute;
top: 50%;
margin-left: 10px;
margin-top: -6px;
left: 0;
border-color: #61e1b9;
border: 3px solid #70d7cf;
}
.huangse {
box-sizing: border-box;
content: ”;
width: 12px;
height: 12px;
border-radius: 50%;
position: absolute;
top: 50%;
margin-left: 10px;
margin-top: -6px;
left: 0;
border-color: #61e1b9;
border: 3px solid #f5c745;
}
.hongse {
box-sizing: border-box;
content: ”;
width: 12px;
height: 12px;
border-radius: 50%;
position: absolute;
top: 50%;
margin-left: 10px;
margin-top: -6px;
left: 0;
border-color: #61e1b9;
border: 3px solid #f1787f;
}
2）第二步就是打开wordpress网站后台的 外观->自定义，找到二级子菜单设置为位置，在菜单导航标签文字前添加如下内容即可：
<i class="lanse"></i>
这里的lanse就代表蓝色小圆圈，同样的方式设置红色（hongse ）、绿色（lvse）和黄色（huangse ），当然，你有css基础也可以自己自行定义一些样式，这里就不演示了。
ok，最后我们发布后刷新首页就会发现你心心念念彩色小圆圈就出来了，是不是很简单。
