I have a simple menu like this



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

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

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

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

            <a href="#">Demo5</a>


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.


//no conflict mode

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

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

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





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

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


Select Screen Options

Select all checboxes

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

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.