I have a drop-down menu (list) made up of `ul` and `li` elements.

Each `li` element has a nested `a` element.

Elements without children have a class of `leaf`.

Elements at the end of each list are given the class `last`.

(I did not write nor design this menu. This is a project I was assigned at work and the menu is being built by Drupal 7)

The only method I have of modifying these menu items is through CSS.

I would like to modify the last two menu items in the **top level** of the list.

Both of these items have the class `leaf`, and the last one also has the class `last`.

Here is what I did:

```
.desktop.navigation .leaf {
       padding-left:10px;
       padding-right: 10px;
       margin-right: 5px !important;
       background-color: rgb(55, 166, 97);
}

.desktop.navigation .leaf > a{
       color: white;
       font-weight: bold;
}

.desktop.navigation .last {
       padding-left:10px;
       padding-right: 10px;
       margin-left: 5px !important;
       background-color: rgb(55, 97, 166);
}

.desktop.navigation .last > a{
       color: white;
       font-weight: bold;
}

```

This CSS does what I want to the top level nodes, yet it also affects the nodes at lower levels as well.

Is there any way that I can **only apply these styles to the top level nodes of my menu?**

The only way that I can think of to isolate these `li` elements is the fact that their `ul` parent does not have a `ul` parent. The other `li` elements being affected (the ones that I do not want to be affected) have a parent `ul` element, yet that parent `ul` element has a parent `ul` element.

And as requested by @emmanuel; an image of my html (since Drupal wrote all the HTML and I can't modify it, otherwise I wouldn't have this problem):

![List](https://i.stack.imgur.com/5m8qo.png)