Add an arrow to link with the children

Here's a code of the simpliest multilevel menu:

<nav>
    <ul>
        <li><a href="#">I am a 1st level link</a></li>
        <li><a href="#">I am a 1st level link with children and I want to have an arrow next to me (or different background)</a>
            <ul>
                <li><a href="#">I am a 2nd level link</a></li>
                <li><a href="#">I am a 2nd level link with children and I want to have an arrow next to me (or different background)</a>
                <ul>
                    <li><a href="#">I am a 3nd level link</a></li>
                    <li><a href="#">I am a 3nd level link</a></li>
                </ul>
                </li>
            <li><a href="#">I am a 2nd level link</a></li>
            </ul>
        </li>
        <li><a href="#">I am a 1st level link</a></li>
        <li><a href="#">I am a 1st level link</a></li>
    </ul>
</nav>

Is there a way of selecting links with children and adding them different styling (background, list-style-type icons etc.)? The menu is dynamic so giving ids or classes won't help in this case.

I'd love to see it in CSS3, if not possible - jQuery or PHP would be ok. I want it to be cross-browser ready. But at the moment don't even know WHERE to start?

Thanks a lot!

This seems to work using jquery... you can customize the special class to be a background image with an error or whatever you want....

<script>
    $(document).ready(function(){
        $('ul a + ul').each(function(){
            $(this).prev().addClass('special');
        });
    });
</script>
<style type="text/css">
    .special {background-color: red;}
</style>
我来评几句
登录后评论

已发表评论数()

相关站点

+订阅
热门文章