Grow your CSS skills. Land your dream job.

Applying background image and css to the child elements of list

  • # 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

    # December 23, 2012 at 5:05 am

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

    # 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

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

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".