Menu like the new site of python

[dany12]

I have a simple menu like this

HTML

<div>
    <ul>

        <li>
            <a href="#">Demo</a>
        </li>

        <li>
            <a href="#">Demo2</a>
        </li>

        <li>
            <a href="#">Demo3</a>
        </li>

        <li>
            <a href="#">Demo4</a>
        </li>

        <li>
            <a href="#">Demo5</a>
        </li>
    </ul>
</div>

CSS

ul li:nth-child(1){border-top:4px solid red;}

ul li:nth-child(2){border-top:4px solid pink;}

ul li:nth-child(3){border-top:4px solid blue;}

ul li:nth-child(4){border-top:4px solid orange;}

Now my question is will this work on ie7 and higher?
I am working with wordpress so i can't use a different class for each li.

jQuery

//no conflict mode
    jQuery(document).ready(function($){

        $(ul li).on("click",function(){


            //each li should have a different arrow color that matches the border color



            if($("ul li:nth-child(1)")){

            $(this).removeClass("arrow-red").addClass("arrow-red");

            }




        });



    });

Should I use an if to verify with li was pressed and then add the arrow with a specific color class or is it a easier way around this?

Thank you for any input

[dany12]

For anyone else that needs a solution to this problem, I found out that Wordpress has a way of adding class to the li.

Dashboard->Apearnace->Menu

Select Screen Options

Select all checboxes

Now you can edit any link element and add css classes to it