0

I have a menu with a background like this: Menu Background

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!

Community
  • 1
  • 1
Mhluzi Bhaka
  • 1,364
  • 3
  • 19
  • 42
  • 1
    Sure it is, with some combination of `position: relative/absolute` and then `top/left/bottom/right` properties, or even using `margins` (negative if necessary). – Vucko May 16 '16 at 13:43
  • Please can you supply your full HTML and CSS of what you have so far. – Hidden Hobbes May 16 '16 at 13:45

2 Answers2

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>
haltersweb
  • 3,001
  • 2
  • 13
  • 14
1

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:

staggered list items

Ezra Free
  • 808
  • 11
  • 21