prathoven

# December 23, 2012 at 4:55 am

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

joshuanhibbert

# December 23, 2012 at 5:05 am

Mind sharing what you have so far on http://jsfiddle.net?

David_Leitch

# December 23, 2012 at 6:16 am

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

# December 23, 2012 at 8:36 am

@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.