Ist es möglich, ul li inline für ein Menü zu staffeln?

Question

Ich habe ein Menü mit einem Hintergrund wie folgt aus:

ich eine ungeordnete Liste der Menüelemente bin mit - Home, Produkte, Angebote, Artikel und Kontakt und möchte alle Einzelteile erhalten in ihrer anzuzeigen entsprechende Registerkarte:

mit CSS kann ich das erste Element in der Liste bekommen mit seiner Box aufreihen aber nicht den Rest -

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

ich versucht habe, padding auf einzelne Elemente hinzufügen, aber kein Glück haben.

Auch ich habe versucht, margin-top zu den einzelnen Elementen hinzuzufügen (wie zu dieser Frage Stagger or Stair-Case a Menu), aber das scheint auch nicht für mich zu arbeiten.

Ist es überhaupt möglich solche Artikel zu staffeln? Oder gibt es vielleicht einen besseren Weg, dies zu tun?

Idealerweise möchte ich, wenn möglich, den Tab-Box-Effekt rein mit CSS erstellen lassen. Allerdings stehe ich immer noch vor dem gestaffelten Layout.

Irgendwelche Ideen geschätzt!

Answer 1

Stellen Sie sicher, dass Ihre li relativ positioniert sind.

Verwenden Sie dann oben, um zu stylen.

meinen Code zu sehen ...

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

Dies sollte das tun, was Sie tun möchten:

#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>

Ausgabe: