jquery - 样式化水平下拉菜单

Question

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

1. 如何在悬停时显示的页眉边框顶部添加一个蓝色小三 Angular 形，如下所示: http://i.imgur.com/C1E30.png

2. 我在主导航中的链接右侧添加了一个小箭头。我通过在 wordpress 中使用下拉菜单为每个列表元素指定一个 css 类来做到这一点，然后我使用了 css :after pseudo元素在这些元素的右侧添加字体图标，问题是它还会将图标添加到下拉菜单链接，我不希望这样。
http://i.imgur.com/9QPry.png -wordpress 菜单结构

html:

 <header>
    <div id="wrap">     
        <a id="logo" href="<?php bloginfo('siteurl');?>" title="Vratite se  na početnu stranicu" >
            <img src="<?php bloginfo('template_url');?>/images/logo.png" alt="Obrtnička Škola Koprivnica Logo" width="53" height="70" />
        </a>
        <h1>OBRTNIČKA ŠKOLA KOPRIVNICA</h1>
        <nav class="cf">
            <?php wp_nav_menu( array('menu' => 'Main' , 'container' => none)); ?>
        </nav>
    </div>
</header>
<div id="subnav"></div>

CSS:

/*****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;
}

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');
        });

Answer 1

如果调用正确，Wordpress 会将 .current-menu-item 和 .current_page_item 类添加到菜单中:

即

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

只需使用绝对定位为您的 .current_page_item 设置背景样式。像这样的东西:

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