为二级菜单的父级添加下拉css三角箭号

自己折腾主题，难免会遇到很多细节问题，找到方法，根据自己的主题需求修改，边学边用，主题这东西，折腾无止境，就像穿衣服一样，总要换换，这次是在PC端菜单和手机端菜单增加下拉三角css箭号。

虽然可以直接使用CSS实现，但是并不完美，会造成鼠标放在菜单下方就自动触发下拉菜单。

第一种方法，比较简单，直接插入，不受菜单css影响：

菜单html代码：

<nav>
<ul id="#menu-caidan">
<li><a href="#">导航菜单1</a></li>
<li><a href="#">导航菜单2</a>
<ul class=“sub-menu”>
<li><a href="#">二级菜单1/a></li>
<li><a href="#">二级菜单1</a></li>
</ul>
</li>
</ul>
</nav>

jQuery代码

<script>
$(function() {
$("#menu-caidan").find(".sub-menu").siblings("a").addClass("triangle");
});
</script>

CSS代码：

.triangle:after {
position: relative;
top: 13px;
right: -5px;
width: 0;
height: 0;
content: '';
border-top: 5px solid #999;
border-right: 5px dashed transparent;
border-left: 5px dashed transparent;
}

第二种方法，纯css实现，只限wordpress，并且这种方法需要你的菜单css适应：

#nav .menu li.menu-item-has-children:after{
position: absolute;
position: relative;
top: 13px;
right: -5px;
width: 0;
height: 0;
content: '';
border-top: 5px solid #999;
border-right: 5px dashed transparent;
border-left: 5px dashed transparent;
}

不知道为什么，我也非这类专业，即使不会，即使很繁琐，但就是喜欢折腾这些，乐此不彼，这东西为何有如此魔力，能让我折腾十多年，就是拥有个人网站以后，就喜欢搭理自己的老窝。

目前还没找到其他有如此强烈的兴趣。。。甚至好几次做梦都会在折腾，都会笑。

这东西难道和毒品一样吗？会上瘾。。。我甚至在想，终止的那天会是什么时候？什么情况。。

仔细思考一下为什么，我发现是因为和它保持远距离产生美，就是如果你把CSS，PHP，JavaScript，JQuery弄得非常熟悉，或许那天就是你厌倦它的时候。

当然，也有一种是你越了解，越喜欢上它。

或许，喜欢这东西是因为我内心有一种喜欢整理修改美化的爱好，比如：整理家务，设计房屋，修理东西等等，弄好后会给我带来另一种喜悦。

赏