Menu Arrow for Child Element

Question

I have a menu for a website I am designing and there are parent and child elements...I was wondering if there was someway I could add an arrow to my navigation if the parent has a child element?

My navigation code looks like:

<div id="nav">
    <ul>
        <?php
            wp_list_pages("title_li=");
        ?>
    </ul>
</div>

My CSS code looks like:

http://pastebin.com/xBbHsyVM

I would prefer to use a text arrow, but an image arrow will work just as easily...a css solution over javascript or jquery is also a plus, but not a big deal if it isn't.

Thanks,
Josh

Answer 1

To add arrow for parent elements:

jQuery + CSS Solution:

JQUERY:

jQuery(function($){
  $(document).ready(function(){
    $('ul.sub-menu').parent().addClass('drop-down'); // Add Sub-Menu Class to insert personalized style
    $('li.drop-down > a:first-child').wrapInner('<span class="menu-bullet" />'); // Add .menu-bullet in span to insert your arrow image background 
  });
});

CSS:

div#nav ul li.drop-down a .menu-bullet {display:block; background:url(your_image_path.jpg) no-repeat; padding-left:15px; /* padding left value is based on arrow image width */}

---

To add arrow for child elements:

jQuery + CSS solution:

JQUERY:

jQuery(function($){
  $(document).ready(function(){ 
    $('div#nav ul li ul li a').wrapInner('<span class="arrow" />');
  });
});

CSS:

span.arrow {display:block; background:url(your_image_path.jpg) no-repeat; padding-left:15px; /* padding left value is based on arrow image width */}

or only CSS Solution:

div#nav ul li ul li a:before {content:"→ "}

Answer 2

Ok,

This what I ended up with:

<script type="text/javascript">
    jQuery(function($){
        $(document).ready(function(){
            $('ul.children').parent().addClass('drop-down'); // Add Sub-Menu Class to insert personalized style
            $('li.drop-down > a:first-child').wrapInner('<span class="menu-bullet" />'); // Add .menu-bullet in span to insert your arrow image background
        });
    });
</script>

and the css:

#nav ul.children li a span.menu-bullet:after {
    content: " »";
    font-size: 18px;
    position: absolute;
    right: 15px;
    top: 12px;
}

It's very close to Rafael's answer...I've only tweaked it a little. I know this rules out support for IE6, but I view the arrows as extra appeal, not necessarily a requirement - so that's ok with me.

Rafael's answer is basically what I used, so I'm going to award the answer to him. Thanks for pointing me in the right direction!

Thanks,
Josh