I have a menu with a background like this:
[![Menu Background](https://i.stack.imgur.com/OfqEf.png)](https://i.stack.imgur.com/OfqEf.png)

I am using a unordered list for the menu items - Home, Products, Specials, Articles and Contact and would like to get all the items to display in their corresponding tab:

Using CSS I can get the first item in the list to line up with its box but not the rest - 

```
#top_menu li {
    display: inline-block;
    padding-right: 44px;
    padding-top: 73px;
}

```

I have tried adding padding to individual items but not having any luck.

Also I have tried adding margin-top to the individual items (as per this question [Stagger or Stair-Case a Menu](https://stackoverflow.com/questions/8404350/stagger-or-stair-case-a-menu)) but that doesn't seem to work for me either.

Is it even possible to stagger li items like that? Or is there perhaps a better way to do this?

Ideally what I would like to be able to do is to have the tab box effect created purely with CSS if possible. However with that I am still stumped by the staggered layout.

Any ideas appreciated!