How to not add arrows to links in my submenu in jQuery?

Question

I am writing my own jQuery navigation submenu script. When you hover over a link in the horizontal nav that has a ul tag, it makes that ul appear. I have a bit of code that adds an arrow to the links in the horizontal nav if it has a submenu. My problem is that it also adds the arrows to the links in the submenu. This is not a big deal functionally, but it does look bad.

The odd part is that if I use $(this).find('> a') it screws up the appearance of the submenu. The submenu appears when I hover over the top-level link, but then disappears right away when the mouse leaves that link. So I can basically see the entire submenu when the mouse is hovered over the top level link. When the mouse leaves the top level link, the submenu disappears and I can't click on the submenu links. What am I doing wrong?

Here is a JSFiddle. Change $(this).find('a') to $(this).find('> a') and you'll see what I mean. Thanks for your time!

$(document).ready(function(){
    $('nav ul li:has(ul)').each(function(){
        var listItem = $(this);
        $(this).find('> a').each(function(){
            var aTag = $(this);
            aTag.append('<img src="{img_url}/caret.png" width="8" height="8">');
            aTag.on('mouseover', function(){
                listItem.find('ul').each(function(){
                    $(this).css('display', 'block');
                });
            })
            .on('mouseout', function(){
                listItem.find('ul').each(function(){
                    $(this).css('display', 'none');
                });
            });
        });
    });
});

Answer 1

you have to pull out the first a tag from your loop through .each

$(document).ready(function () {
    $('nav ul li:has(ul)').each(function () {
        var listItem = $(this);
            // first a tag as new var
            var aTagFirst = listItem.children('a');
            aTagFirst.append('<img src="{img_url}/caret.png" width="8" height="8">');

        $(this).find('a').each(function () {
            var aTag = $(this);
            aTag.on('mouseover', function () {
                listItem.find('ul').each(function () {
                    $(this).css('display', 'block');
                });
            })
                .on('mouseout', function () {
                listItem.find('ul').each(function () {
                    $(this).css('display', 'none');
                });
            });
        });
    });
});

DEMO