For example

<ul>

      <li></li>                    <-This will have the background #1a

      <li></li>                    <-This will have the background #1a

      <li><ul>

            <li></li>            <-This will have the background #1a

            <li></li>            <-This will have the background #1a

            </ul>

      </li>

      <li></li>                  <-This will have the background #1a

      <li><ul>

            <li></li>            <-This will have the background #1b

            <li><ul>

                  <li></li>      <-This will have the background #1c

                  </ul>

            </li>

      <li></li>                  <-This will have the background #2a

      <li></li>                  <-This will have the background #2a

      <li></li>                  <-This will have the background #3a

      <li><ul>

            <li></li>            <-This will have the background #3b

            <li></li>            <-This will have the background #3b

            <li></li>            <-This will have the background #3b

            </ul>

      </li>

<ul>

So I would need the last children. If there is no nested element then that is considered the last child. I have to write a jquery script to apply a background to the last children. A nested element can have a nested element and then that element's children will be considered the last ones so they will get the background but not the parents of those children. If the item has no children then that item will have a background.

So there are 3 different backgrounds. Each letter a, b c will represent a lighter tone compared to the previous color. C is lighter than B, B is lighter than A etc. So this will have to be a "smart" system in which the ul li will be updated and depending if it is the last one in hierarchy it will not have the arrow.