内容简介:

今天小编更新了 WordPress 美化教程,内容为 RiPro - V5 主题网站二级菜单增加小圆点,该教程支持 Ripro - v2 和 v5,理论上适用于所有主题,呼吁感兴趣的小伙伴抓紧更新。

效果图片:

美化代码:

/***二级导航前面小圆点***/

.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;

}

/***二级导航前面小圆点结束***/

第二部:在菜单添加一下代码:

<i class="hongse"></i> //这里的"hongse"对应的是上面CSS样式,一共4个样式,根据自己的爱好可以作相应的调整