Applying background image and css to the child elements of list

[prathoven]

Hello everyone,
I’m trying to achieve this

by css code
#nav ul li ul li:first-child
{
background-image: url(‘../images/menuArrow.png’);
background-repeat:no-repeat
background-color: rgb(238,237,237);
}
#nav ul li ul li /*applying background color to other child element */
{
background-color: rgb(238,237,237)
}
But this overwrites the css property for background images.

Is there anyway to achieve this. Thanx for zillion on taking interest in this problem

[David_Leitch]

I’ve worked up [something](http://codepen.io/David_Leitch/pen/ygHth “http://codepen.io/David_Leitch/pen/ygHth”) that you could use, which uses only pseudo elements to create the triangle indicator. I’ve used the pseudo-element of the parent menu anchor to create the triangle, but it would be easy enough to use the first child’s pseudo element to create it as well

[prathoven]

@David: Thanx david you rocked my day! Your code is clean, I feel like hanging in the wall! Thanx for your help.

@joshuan: I think its kind of solved now.

[Author]

Posts