Is it possible to stagger ul li inline for a menu?

Question

I have a menu with a background like this:

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 ) 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!

Answer 1

Make sure your li are relatively positioned.

Then use top to style.

see my code...

 ul { margin-left: .25em; padding-left: 0; list-style: none; } li { position: relative; margin-left: 0; padding-left: 0; display: inline-block; width: 75px; height: 30px; border: 1px solid red; } li:nth-child(2) { top: 10px; } li:nth-child(3) { top: 20px; } li:nth-child(4) { top: 30px; } li:nth-child(5) { top: 40px; } 

 <ul> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> 

Answer 2

This should do what you want to do:

 #top_menu { list-style: none; } #top_menu li { float: left; clear: none; position: relative; padding: 2px 6px; margin-right: 2px; background-color: #09f; } #top_menu li a { color: #fff; text-decoration: none; } #top_menu li:nth-child(2) { margin-top: 5px; } #top_menu li:nth-child(3) { margin-top: 10px; } #top_menu li:nth-child(4) { margin-top: 15px; } #top_menu li:nth-child(5) { margin-top: 20px; } 

 <ul id="top_menu"> <li><a href="">Link</a></li> <li><a href="">Link</a></li> <li><a href="">Link</a></li> <li><a href="">Link</a></li> <li><a href="">Link</a></li> </ul> 

output: