Jquery 设置水平下拉菜单的样式

我为我的网站制作了一个水平下拉菜单，我有两个关于样式的问题：

1.如何在标题边框顶部添加一个蓝色小三角形，该三角形将显示在悬停上，如下所示：

2.我在主导航中的链接右侧添加了一个小箭头。我通过在wordpress中使用下拉菜单为每个列表元素指定一个css类，然后使用css:after伪元素在这些元素的右侧添加一个字体图标，问题是，它还将图标添加到下拉菜单链接中，我不希望出现这种情况。
-wordpress菜单结构

html:

javascript:

        // on mouse over, remove all active classes from main menu items and add active class to current item
        $('nav > ul > li > a').mouseover(function() {
        // remove all active classes
        $('nav > ul > li').removeClass('active');
        // add active class to current item
        $(this).parent().addClass('active');
        });

---

Wordpress将.current菜单项和.current_page_菜单项类添加到菜单中，前提是您已正确调用该类：

i、 e

---

您确定人们将安装此字体类型以查看箭头字符吗？：'Guifxv2TransportsRegular'？关于定位蓝色箭头，我将创建一个表示蓝色箭头的小图像，并将其设置为

元素的背景图像，该元素将应用于

：hover

。为了确保图像正确定位在

元素的底部和中心，我会使用：

背景：url（plava strelica.png）无重复中心底部@font-face在现代浏览器中是受支持的，此外，我可以很容易地使用图像。我在主导航中使用了一个图像作为链接的背景，效果非常好，谢谢！不过，我仍然需要第二个问题的帮助。谢谢，这正是我想要的。njeh，我删除了我的评论，因为第二个李没有更多的UL，但箭头仍然出现。我建议使用Javascript。如果你愿意，我可以教你怎么做！这很奇怪，因为我使用了以下代码：
nav>ul>li.dropdown>a:after{content:url（images/strelica dropdown.png）}
，效果很好。
/*****NAV STYLES*******/
nav{
    position:absolute;
    top: 42px;
    padding-bottom:2.7em;
}

nav li {
    float: left;
    font-size: 1.2em;
}
nav li a {
    float: left;
    padding: 0 10px 0 0;
    color: white;
}

nav ul li:first-child {
    padding-left: 70px;
}

nav ul ul{
    position: absolute;
    left: -999em;
    bottom: 0em;
    min-width: 230%;
    max-width: 170%;
}

nav ul ul li{
    font-size: 0.75em;
    float: none;
    display: inline-block;
    padding-right: 10px;
}
nav ul ul li:first-child {
    padding-left: 0;
}
nav ul ul li a {
    color: #4F4F4F;
}

nav ul ul li a:hover {
    color: black;
}


.dropdown a:after {
    content: "s";
    font-family: 'Guifxv2TransportsRegular';
    color: white;
    font-size: 0.7em;
    padding: 0 0 2px 3px;
}

/* make sub-menu appear on active links only */
nav li.active > ul {
    left:0;
}

/* clearfix micro hack = http://nicolasgallagher.com/micro-clearfix-hack/ */
/* For modern browsers */
.cf:before,
.cf:after {
    content:"";
    display:table;
}

.cf:after {
    clear:both;
}

/* For IE 6/7 (trigger hasLayout) */
.cf {
    zoom:1;
}

        // on mouse over, remove all active classes from main menu items and add active class to current item
        $('nav > ul > li > a').mouseover(function() {
        // remove all active classes
        $('nav > ul > li').removeClass('active');
        // add active class to current item
        $(this).parent().addClass('active');
        });

<?php wp_nav_menu( array('menu' => 'Main Menu' )); ?>

.current_page_item {
    background: url(arrow.png) no repeat;
    position: absolute:
    top: -25px // Adjust this to see it depending on your padding, margins
    left: 50%; // Again, play with this percentage or use pixels
}